Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set mousemove update speed?

Tags:

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);  } 
like image 693
Vincent Avatar asked Mar 10 '11 10:03

Vincent


People also ask

How often does Mousemove event fire?

What is Mousemove event in Javascript? The mousemove event occurs whenever the mouse pointer moves within the selected element. The mousemove() method triggers the mousemove event, or attaches a function to run when a mousemove event occurs. Note: Each time a user moves the mouse one pixel, a mousemove event occurs.

How does Mousemove work?

MouseMove is a simple event that is executed when a pointer is moving over or around an element. Mousemove is a javascript event that inside a web page. The mousemove event can also be understood as a part of an event handler, whereupon some action or movement by a mouse pointer, an intended script is executed.

What is Mousemove Javascript?

The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.

Which are the simplest mouse event?

click: the simplest event. dblclick: fired on a double click on an HTML element. mousedown: fired when the button is pressed. mouseup: fired when the button is released.


2 Answers

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.

like image 108
Piskvor left the building Avatar answered Sep 23 '22 21:09

Piskvor left the building


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.

like image 45
river Avatar answered Sep 24 '22 21:09

river