Javascript get faster Pointer Events

Question

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?

I think this is canvas-related or even browser-related, can you provide a fiddle to play with as much similar to your, please? — briosheje, Mar 29 '19 at 11:36

score 2 · Accepted Answer · answered Mar 29 '19 at 12:14

2

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.

answered Mar 29 '19 at 12:14

rafaelcastrocouto

11,781
3
38
63

With x,y coordinates it'll work ok, but with tilt angles, pressure and time it would be probably a mess. I need collect data for future analyze, so for me interpolation is not the best option. May be there is another way to run data collection function more often? – opales Mar 29 '19 at 12:32
1

You will get around 16ms with `requestAnimationFrame` and you can get down to 4ms with `setTimeout` or `setInterval`. The best you can do is `setImmediate` or `postMessage` ([read more](https://stackoverflow.com/questions/19906947/is-there-anything-faster-than-settimeout-and-requestanimationframe)) But keep in mind that the fact that your function is running more often doesn't mean that the rate of change of the captured values will also increase. – rafaelcastrocouto Mar 30 '19 at 13:15

Javascript get faster Pointer Events

1 Answers1