1

The task is to draw a curve ob canvas. The problem is that if mouse is moved too fast, the coordinates are skipped and not captured. (Html5/Js canvas capturing mouse coords when it moves fast - my previous post..)

Is there a cross-browser way to limit mouse speed inside an element (div, canvas, etc.)?

Community
  • 1
  • 1
CodeGust
  • 831
  • 3
  • 15
  • 36
  • 4
    I would be surprised if this was possible, mouse movement is controlled by the operating system. – Joshua Byer Apr 09 '15 at 20:42
  • 1
    You could make your own cursor that follows the real cursor very slowly – Joshua Byer Apr 09 '15 at 20:43
  • 3
    **No, there is no way to limit mouse speed inside an element.** – markE Apr 09 '15 at 20:49
  • Ok, thank you! Too bad there seems to be no way capturing all the mouse coords... – CodeGust Apr 09 '15 at 21:13
  • 1
    BTW, If you need more points along the line that connects the current and prior mouse coordinates, you can just interpolate points along that imaginary line: `var dx = endPt.x-startPt.x; var dy = endPt.y-startPt.y; var X = startPt.x + dx*percent; var Y = startPt.y + dy*percent;` – markE Apr 10 '15 at 03:34

1 Answers1

2

I assume by "limiting mouse speed" you actually mean enable capturing high volume of mouse events so that you get more detailed information, or resolution, of the mouse path.

The browser will normally work at a high-level when it comes to mouse events. The system will capture the mouse events, but the browser will do many other tasks such as pushing events, bubbling them etc. and only capture the current mouse position when it actually can.

To compensate for this you need to use all sort of tricks such as splines.

Possible workaround

I don't intend to make a broad answer for this as it will quickly become out of scope to go through the steps and scenarios you would need for a spline approach (interpolation, knee-breaks which require relative angle tracking, smoothing etc.).

However, there is a new API called Pointer Lock API (see demo and source in that link as well) which allow the browser to work at a lower level closer to the system, so it can spawn mouse events faster and at a higher volume than it could otherwise.

It do have some drawbacks as with all low-level approaches:

  • You need to render your own cursor
  • Mouse movements are not limited to the edges so you need to provide wrapping or limits yourselves
  • It will request user for permission
  • Not supported in all browsers
  • And it target games and 3D more than drawing application

But this is the closest you will get to high volume of mouse events without interpolation etc.

Community
  • 1
  • 1