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 mousemove coordinates is not fast enough. What happens is that if you write your signature to fast, you see some white spaces between writed pixels.

How can I set the refresh speed of the mousemove faster?

$("#xx").mousemove(function(e){

    ctx.fillRect(e.pageX - size, e.pageY - size, size, size);

    $("#pagex").html(e.pageX - size);
    $("#pagey").html(e.pageY - size);

}

Answer 1

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 2

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.

Answer 3

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

Answer 4

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