Question

I have written the below code to calculate mouse moved co-ordinates

$(document).mousemove(function(e){
  console.log(e.pageX + ", " + e.pageY);
});

and here is the fiddle​.

My Question is, when I move mouse slowly I am able to see all the mouse moved co-ordinates in console. But when I move faster I could not see all. Only few are counted.Is there any problem with my code?

Answer 1

You will need to intrapolate them (i.e. calculate the points in between yourselves). The browser will just return the mouse position at every new tick (e.g. every 0.01 second).

Happily, the mouse position is only checked every so often, otherwise the OS would immediately freeze.

Intrapolation could look like

var posX, posY;
$(document).mousemove(function(e){
  var points = [];
  if(posX && posY) {
      // calculate a straight line that the mouse moved over
      // It gets more difficult if you want to take e.g. 
      // the current curved path into account
      var diffX = e.pageX - posX;
      var diffY = e.pageY - poxY;
      var length = Math.round(Math.sqrt((diffY*diffY)+(diffX*diffX)));
      for(n=0;n<length;n++) {
          var pointX = posX + (n/length) * diffX;
          var pointY = posY + (n/length) * diffY;
          points.push({x:pointX,y:pointY});
      }
  }
  points.push({x:e.pageX,y:e.pageY});
  posX = e.pageX;
  poxY = e.pageY;
  for(point in points) {
      console.log(point.x + ", " + point.y);
  }
});