How to get missing co-ordinates on mousemove javascript

Question

If I move mouse quickly some of the pixels are missing, if you check my console output below you will see the difference.

(index):325 new y -  131
(index):326 old x -  462
(index):327 old y -  103
(index):324 new x -  484
(index):325 new y -  161
(index):326 old x -  474
(index):327 old y -  131
(index):324 new x -  498
(index):325 new y -  229
(index):326 old x -  484

at one point e.clientX is 462 and it suddenly went to 484 and then 474.

I need the missing pixels for my calculations.

Answer 1

The browser can only get that information every time the event fires, which is every frame. NOT every pixel. It can't capture every point in between. The closest you can get is to check the time from the last one and the time now, and try to guess where it was in between frames. getTime() returns the milliseconds. If you take that minus the last getTime() you will know how long the event took to fire (this depends on the speed of the user's browser, other background processes, etc... events do not fire perfectly). So from that you can figure out where the mouse was at some point in between the events.

Think of what happens when your laptop is running out of batteries... or on a phone where people just touch the screen and the "mouse" cursor jumps... and you will see the problem. It is impossible to capture every tiny change.

Edit as noted in the comment, you would not know the actual position between those frames, only the position if the user moved the mouse in a straight line.