How to set mousemove update speed?

Question

im generating a function where it needs to set easy and fast a signature. I\'m writing the signature in an canvas field. I use jQuery for it, but the refresh rate of mousemo

Answer 1

I would suggest (enhancing @river answer):

1. in mousemove event handler just save those points mouse moves through into some buffer (array) so your event handler will be as fast as possible
2. make your other function which will read those points from buffer and draw it on canvas as lineTo() -> lineTo() -> lineTo() so all points will be connected, no whitespace between them.
3. assign this drawing function into a setInterval() so the drawing of your signature will not wait until user finished "drawing", but it will draw that signature with some slight delay after user's finger movements

Answer 2

Some other answers suggested that it's because of a slow handler function. In my tests it didn't make any difference whether I just had count++ in the handler, or much more expensive canvas draw calls - the number of events generated in 10 seconds was about 500 in both cases. However, it might have made a difference on a slower computer.

Apparently most mice/pointers only report their position to the OS fewer than 100 times per second, so this may be something that's not even in the browser's control.

You may want to look into the new PointerEvent.getCoalescedEvents() method. From the MDN docs:

The getCoalescedEvents() method of the PointerEvent interface returns a sequence of all PointerEvent instances that were coalesced into the dispatched pointermove event.

Here's an example:

window.addEventListener("pointermove", function(event) {
  let events = event.getCoalescedEvents();
  for(let e of events) {
    draw(e.pageX, e.pageY);
  }
});

However, after testing this, it only rarely seems to coalesce the events on my computer. Again, though, it may be more useful on slower computers. So for now the best approach is probably to use ctx.lineTo, or a similar method (arcTo, perhaps). Here's a simple working canvas drawing demo that combines getCoalescedEvents with lineTo:

<canvas id="canvas" style="touch-action:none; width:100vw; height:100vh; position:fixed; top:0; left:0; right:0; bottom:0;"></canvas>

<script>
  let mouseIsDown = false;

  let ctx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;


  window.addEventListener("pointerdown", function(e) {
    ctx.beginPath();
    ctx.moveTo(e.pageX, e.pageY);
    mouseIsDown = true;
  });
  window.addEventListener("pointerup", function(e) {
    mouseIsDown = false;
  });
  window.addEventListener("pointermove", function(event) {
   if(mouseIsDown) {
      let events = event.getCoalescedEvents();
      for(let e of events) {
        ctx.lineTo(e.pageX, e.pageY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.pageX, e.pageY);
      }
   }
  });
</script>

Answer 3

You can't. The mousemove events are generated by the browser, and thus you are receiving them as fast as the browser is generating them.

The browser is not obliged to generate the events at any given rate (either by pixels moved, or by time elapsed): if you move the mouse quickly, you will see that a "jump" in coordinates is reported, as the browser is reporting "the mouse has moved, and it is now here", not "...and went through these pixels". In fact, a browser on a slow computer might generate fewer mousemove events, lest the page slow down to a crawl.

What you could do is to connect successive positions from mousemove events with a straight line - this will obviously not get you any more precision, but it may mitigate the impact.

Answer 4

You can fire your own event based on timer, probably a bad idea but better then nothing if you really need it.

Answer 5

You need to make your handler faster.

Browsers can drop events if a handler for that event is still running, so you need to get out of the mousemove handler asap. You could try to optimise the code there or defer work till after the mouse movement is complete. Drawing is probably the slowest thing you are doing, so you could store the mouse movements in memory and draw later. This would not update the display until drawing had finished but it would otherwise work better.