See the code on this site

I want to return the relative coordinates of a mouse click/move with respect to the html5 canvas. What does the code below mean?

if ( event.layerX ||  event.layerX == 0) { // Firefox
            mouseX = event.layerX ;
            mouseY = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
            mouseX = event.offsetX;
            mouseY = event.offsetY;
}

layerX works on all browsers except Opera. offsetX works on all browsers except Firefox

So what do we mean by, if either event.layerX OR event.layerY is 0... I mean event.layerX returns relative coordinates of mouse click w.r.t canvas. So how does this make any sense?

See the code on this site

I want to return the relative coordinates of a mouse click/move with respect to the html5 canvas. What does the code below mean?

if ( event.layerX ||  event.layerX == 0) { // Firefox
            mouseX = event.layerX ;
            mouseY = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
            mouseX = event.offsetX;
            mouseY = event.offsetY;
}

layerX works on all browsers except Opera. offsetX works on all browsers except Firefox

So what do we mean by, if either event.layerX OR event.layerY is 0... I mean event.layerX returns relative coordinates of mouse click w.r.t canvas. So how does this make any sense?

• javascript
• html
• mouseevent
• html5-canvas

• I don't know if it was something else wrong in my code, but in a canvas app I am building, it works fine on an iPhone, but on iPad, layerX and layerY would always return -3,-3 (and because it never varied, there were never two points to define a line, so no drawing would occur). I had to instead use event.touches[0].clientX and clientY. – Robot Woods Commented Jan 18, 2012 at 3:09

2 Answers 2

The better way is such code:

if ( event.offsetX == null ) { // Firefox
   mouseX = event.originalEvent.layerX;
   mouseY = event.originalEvent.layerY;
} else {                       // Other browsers
   mouseX = event.offsetX;
   mouseY = event.offsetY;
}

It is shortly, correct, and

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

For mouse coordinates (123,12) event.layerX || event.layerX == 0 will give us TRUE in the first part of the statement (event.layerX) and the second one (event.layerX == 0) won't be checked.

If event.layerX is undefined (because ie. we are using Opera) first part of the event.layerX || event.layerX == 0 will give us FALSE and the second one won't be checked.

But there is one more possibility. Mouse coordinates may be (0, 123) and the first part of event.layerX || event.layerX == 0 will give us FALSE while these coordinates are perfectly valid. That's why there is a second part event.layerX == 0 which will return TRUE so the if statement will be evaluated after all.