html5 - Javascript (jQuery) limit mouse movement speed inside an element -
the task draw curve ob canvas. problem if mouse moved fast, coordinates skipped , not captured. (html5/js canvas capturing mouse coords when moves fast - previous post..)
is there cross-browser way limit mouse speed inside element (div, canvas, etc.)?
i assume "limiting mouse speed" mean enable capturing high volume of mouse events more detailed information, or resolution, of mouse path.
the browser work @ high-level when comes mouse events. system capture mouse events, browser many other tasks such pushing events, bubbling them etc. , capture current mouse position when can.
to compensate need use sort of tricks such splines.
possible workaround
i don't intend make broad answer become out of scope go through steps , scenarios need spline approach (interpolation, knee-breaks require relative angle tracking, smoothing etc.).
however, there new api called pointer lock api (see demo , source in link well) allow browser work @ lower level closer system, can spawn mouse events faster , @ higher volume otherwise.
it have drawbacks low-level approaches:
- you need render own cursor
- mouse movements not limited edges need provide wrapping or limits yourselves
- it request user permission
- not supported in browsers
- and target games , 3d more drawing application
but closest high volume of mouse events without interpolation etc.