Is there any way to accelerate the mousemove event?

Question

I wrote a little drawing script (canvas) for this website: http://scri.ch/

When you click on the document, every mousemove event basically executes the following:
- Get coordinates.
- context.lineTo() between this point and the previous one
- context.stroke() the line

As you can see, if you move the cursor very fast, the event isn’t triggering enough (depending on your CPU / Browser / etc.), and a straight line is traced.

In pseudocode:

window.addEventListener('mousemove', function(e){
  myContext.lineTo(e.pageX, e.pageY);
  myContext.stroke();
}, false);

This is a known problem, and the solution is fine, but I would like to optimize that.

So instead of stroke() each time a mousemove event is triggered, I put the new coordinates inside an array queue, and regularly draw / empty it with a timer.

In pseudocode:

var coordsQueue = [];

window.addEventListener('mousemove', function(e){
  coordsQueue.push([e.pageX, e.pageY]);
}, false);

function drawLoop(){
  window.setTimeout(function(){
    var coords;
    while (coords = coordsQueue.shift()) {
      myContext.lineTo(coords[0], coords[1]);
    }
    myContext.stroke();
    drawLoop();
  }, 1000); // For testing purposes
}

But it did not improve the line. So I tried to only draw a point on mousemove. Same result: too much space between the points.

It made me realize that the first code block is efficient enough, it is just the mousemove event that is triggering too slowly.

So, after having myself spent some time to implement a useless optimization, it’s your turn: is there a way to optimize the mousemove triggering speed in DOM scripting?

Is it possible to “request” the mouse position at any time?

Thanks for your advices!

Benenson

Duplicate: #5258924 – Hogwash

Answer 1

If you want to increase the reporting frequency, I'm afraid you're out of luck. Mice only report their position to the operating system n times per second, and I think n is usually less than 100. (If anyone can confirm this with actual specs, feel free to add them!)

So in order to get a smooth line, you'll have to come up with some sort of interpolation scheme. There's a whole lot of literature on the topic; I recommend monotone cubic interpolation because it's local, simple to implement, and very stable (no overshoot).

Then, once you've computed the spline, you can approximate it with line segments short enough so that it looks smooth, or you can go all-out and write your own Bresenham algorithm to draw it.

If all this is worth it for a simple drawing application... that's for you to decide, of course.

Inaction

Thanks for the links, but yes, that would be a little overkill for this application. I think the problem does not come from OS (Photoshop is a lot faster) but from browsers, who voluntarily limit the mousemove event triggering, certainly because a lot of scripts directly relies on it to make intensive tasks. But why not allowing authors to request the mouse position? Something like window.getMousePosition()? – Benenson

SVG Edit (code.google.com/p/svg-edit) is open source and clearly does some smoothing calculation, so you probably don't need to recreate the wheel. – Adele

Normal mice send about 100-150 updates per second. My Logitech G3 sends 500. Gaming mice might send even more. – Falbala

Answer 2

Cool site, unfortunately there is no way to request the current position of the mouse with JavaScript, the only hooks you have are the events you're already using. If you must have more control I'd look at using flash where you can change the frame rate and request the mouse position.

trace("Mouse X: " + _xmouse);
trace("Mouse Y: " + _ymouse);

Avoid

Thanks, but I will not use Flash, I’m an open standards evangelist! ;-) – Benenson

then you are at the mercy of those standards :-) – Avoid

Far preferable to being at the mercy of Flash. – Dressage