PointerEvent: getCoalescedEvents() method

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

ThegetCoalescedEvents() method of thePointerEvent interface returns a sequence ofPointerEvent instances that were coalesced (merged) into a singlepointermove orpointerrawupdate event.Instead of a stream of manypointermove events, user agents coalesce multiple updates into a single event.This helps with performance as the user agent has less event handling to perform, but there is a reduction in the granularity and accuracy when tracking, especially with fast and large movements.

ThegetCoalescedEvents() method lets applications access all un-coalesced position changes for precise handling of pointer movement data where necessary.Un-coalesced position changes are desirable in drawing applications, for instance, where having access to all events helps to build smoother curves that better match the movement of a pointer.

For an illustration of coalesced events, seeFigure 7 in the specification.

Syntax

getCoalescedEvents()

<canvas width="600" height="300"></canvas>

JavaScript

const canvas = document.getElementById("target");const ctx = canvas.getContext("2d");const pointerEvents = [];function drawCircle(x, y, color) {  ctx.clearRect(0, 0, canvas.width, canvas.height);  // draw the last 20 events  if (pointerEvents.length > 20) {    pointerEvents.shift();  }  pointerEvents.push({ x, y, color });  for (const pointerEvent of pointerEvents) {    ctx.beginPath();    ctx.arc(pointerEvent.x, pointerEvent.y, 10, 0, 2 * Math.PI);    ctx.strokeStyle = pointerEvent.color;    ctx.stroke();  }}canvas.addEventListener("pointermove", (e) => {  // draw a circle for the current event  drawCircle(e.clientX, e.clientY, "black");  const coalescedEvents = e.getCoalescedEvents();  for (let coalescedEvent of coalescedEvents) {    // give it an offset so we can see the difference and color it red    drawCircle(coalescedEvent.clientX + 20, coalescedEvent.clientY + 20, "red");  }});