html5 - Javascript (jQuery) limit mouse movement speed inside an element -

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 within 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. scheme capture mouse events, browser many other tasks such pushing events, bubbling them etc. , capture current mouse position when can.

to compensate need utilize sort of tricks such splines.

possible workaround

i don't intend create broad reply 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.

javascript html5 canvas coordinates mouse