Question

So … I created canvas element with jquery:

var canvasElement = $("<canvas id='map' width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');

And now i want to get mouse coordinates, but the next code doesn’t work:

canvasElement.onmousemove = mousemove;
function mousemove(evt) {
  var mouseX = evt.pageX - canvasElement.offsetLeft;
  var mouseY = evt.pageY - canvasElement.offsetTop;
  alert(mouseX+":"+mouseY);
}

canvasElement.offsetLeft is not work, evt.pageX too… Help !

Answer 1

Those properties aren’t cross-browser.

I know of two solutions to get the canvas position :

• the easy one : use jQuery offset

• another one : use a custom and complex code :

   if (!canvasElement.offsetX) {
      // firefox
      var obj = canvasElement;
      var oX = obj.offsetLeft;var oY = obj.offsetTop;
      while(obj.parentNode){
          oX=oX+obj.parentNode.offsetLeft;
          oY=oY+obj.parentNode.offsetTop;
          if(obj==document.getElementsByTagName('body')[0]){break}
          else{obj=obj.parentNode;}
      }
      canvas_position_x = oX;
      canvas_position_y = oY;
  } else {
      // chrome
      canvas_position_x = canvasElement.offsetX;
      canvas_position_y = canvasElement.offsetY;
  }
  

As there is a loop, you’d better store canvas_position_x and canvas_position_y and have them recomputed at each document resize instead of at each mousemove.

Demonstration