The getPredictedEvents() method of the PointerEvent interface returns a sequence of PointerEvent instances that are estimated future pointer positions. How the predicted positions are calculated depends on the user agent, but they are based on past points, current velocity, and trajectory.
Applications can use the predicted events to "draw ahead" to a predicted position which may reduce perceived latency depending on the application's interpretation of the predicted events and the use case.
For an illustration of predicted events, see Figure 8 in the specification.
A sequence of PointerEvent instances.
<canvas id="target" width="600" height="300"></canvas>
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);
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) => {
drawCircle(e.clientX, e.clientY, "black");
const predictedEvents = e.getPredictedEvents();
for (let predictedEvent of predictedEvents) {
drawCircle(predictedEvent.clientX + 20, predictedEvent.clientY + 20, "red");
}
});