CODEWITHSUNDEEP
javascriptperformancehtml5-canvaselectronaddeventlistener
opales
opales

Reputation: 33

Javascript get faster Pointer Events

I'm creating analytic application for Microsoft Surface. Application should be able to collect data in array from MS stylus while drawing (now I'm using HTML5 canvas). I'm using electron to make it desktop, for stylus data collection HTML5 Pointer Events API.

So, there is now event listener, which fires when stylus is moved on the canvas

canvas.addEventListener("pointermove", collectData, false);

And collectData(event) function looks like:

function collectData(event) {
    array.push({
        a: event.tiltX,
        l: event.tiltY,
        p: event.pressure,
        t: Date.now()
    });
}

The problem is, that this event listener fires about 70 times per second and for me it seems like performance limit. For my purposes this value is incredibly small, I'd like to increase this value twice or even more.

Is there any way to increase it or maybe there is another more efficient way to collect data from stylus in JS?

Upvotes: 2

Views: 1168

Answers (1)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

This is the number of times the cursor moved on screen based on the mouse (input device) resolution, there are no more values so you can't just increase it. But you can interpolate in order to increase the number of points in your data.

https://w3c.github.io/uievents/#mousemove

A user agent MUST dispatch this event when a pointing device is moved while it is over an element. The frequency rate of events while the pointing device is moved is implementation-, device-, and platform-specific, but multiple consecutive mousemove events SHOULD be fired for sustained pointer-device movement, rather than a single event for each instance of mouse movement. Implementations are encouraged to determine the optimal frequency rate to balance responsiveness with performance.

Upvotes: 2

Related Questions