Question

I have a function which returns mouse event positions.

// returns the xy point where the mouse event was occured.
function getXY(ev){
var xypoint = new Point();
if (ev.layerX || ev.layerY) { // Firefox
  xypoint.x = ev.layerX;
  xypoint.y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
  xypoint.x = ev.offsetX;
  xypoint.y = ev.offsetY;
}
return xypoint;
}

I am capturing mouse events to perform drawings on html5 canvas. Sometimes I am getting -ve values for xypoint. When I debug the application using firebug I am getting really strange behavior. for example if I put my break point at the 4th line of this function with condition (xypoint.x<0 || xypoint.y<0), it stops at the break point and I can see that layer.x, layer.y was positive and correct. But xypoint.x or xypoint.y is negative. If I reassign the values using firbug console I am getting correct values in xypoint. Can anyone explain me what is happening.

The above works fine if I move mouse with normal speed. If I am moving mouse at very rapid speed I am getting this behavior.

Thanks

Answer 1

Handling mouse position was an absolute pain with Canvas. You have to make a ton of adjustments. I use this, which has a few minor errors, but works even with the drag-and-drop divs I use in my app:

getCurrentMousePosition = function(e) {
  // Take mouse position, subtract element position to get relative position.
  if (document.layers) {
    xMousePos = e.pageX;
    yMousePos = e.pageY;
    xMousePosMax = window.innerWidth+window.pageXOffset;
    yMousePosMax = window.innerHeight+window.pageYOffset;
  } else if (document.all) {
    xMousePos = window.event.x+document.body.scrollLeft;
    yMousePos = window.event.y+document.body.scrollTop;
    xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
    yMousePosMax = document.body.clientHeight+document.body.scrollTop;
  } else if (document.getElementById) {
    xMousePos = e.pageX;
    yMousePos = e.pageY;
    xMousePosMax = window.innerWidth+window.pageXOffset;
    yMousePosMax = window.innerHeight+window.pageYOffset;
  }
  elPos = getElementPosition(document.getElementById("cvs"));
  xMousePos = xMousePos - elPos.left;
  yMousePos = yMousePos - elPos.top;
  return {x: xMousePos, y: yMousePos};
}

getElementPosition = function(el) {
  var _x = 0,
      _y = 0;

  if(document.body.style.marginLeft == "" && document.body.style.marginRight == "" ) {
    _x += (window.innerWidth - document.body.offsetWidth) / 2;
  }

  if(el.offsetParent != null) while(1) {
    _x += el.offsetLeft;
    _y += el.offsetTop;
    if(!el.offsetParent) break;
    el = el.offsetParent;
  } else if(el.x || el.y) {
    if(el.x) _x = el.x;
    if(el.y) _y = el.y;
  }
  return { top: _y, left: _x };
}

Moral of the story? You need to figure in the offset of the canvas to have proper results. You’re capturing the XY from the event, which has an offset that’s not being captured in relation to the window’s XY. Make sense?