Canvas relative position

Question

I have been playing around with the canvas element in HTML5 and I am trying to get the canvas relative position.

I am using the layerX and layerY which seems like the most obvious solution but for some reason, and maybe this is just how it works the point that the layerX/Y sees is at the left corner of the pointer. my code is as follows

function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

It just adds the _x/y elements to the ev object so I can use them on a drawing surface.

Here is a video of what is happening to me:

http://img.zobgib.com/2011-03-21_1413.swf

If you want to play with it yourself you can at http://research.zobgib.com/beta

Do I just need to set a manual offset, or is layerX/Y wrong?

Edit:

I can add a manual offset but this seems like the WRONG way to go about putting the x/y positions in the proper place.

The code for the offset is just:

...
ev._x = ev.layerX-10;
ev._y = ev.layerY-13;
...

EDIT 2:

In Opera the cursor is a pointer and the position is correct by default.

In Chrome and Safari when you click (by default, without returning false) the cursor turns to a text selector and position is at the bottom of the text selector.

In Firefox the cursor is a pointer but the position is in the center of the hand.

Which a return false;
- Safari on the mousedown/move the cursor remains a pointer but the position is off
- Firefox remains the same as without return false
- Opera still wins
- Chrome the cursor remains a "mouse cursor" and the position is off.
With the offset
- Safari is close to correct (slightly above)
- Firefox slightly above
- Opera WIN
- Chrome correct

There must be a better way

P.S. I cannot test IE so any results on that would be nice

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

layerX and layerY return offsets relative to the entire document, unless the event occurs inside a postioned element. The simplest solution is to add:

#beta {
    position: absolute;
}

Alternatively, you can first get the position of the canvas in the document and calculate your offsets relative to those coordinates, as described in this previous answer:

Tracking mouse position in canvas when no surrounding element exists

edited May 23 '17 at 11:48

Community

1
1

answered Mar 21 '11 at 18:37

Wayne

59,728
15
131
126

This yeah... I don't like that but it works maybe there is a better way to get mouse position relative to the canvas so position doesn't have to be absolute. – austinbv Mar 21 '11 at 18:50
@zobgib - Yes, there is. See this previous answer for the solution: http://stackoverflow.com/questions/5085689/tracking-mouse-position-in-canvas/5086147#5086147 – Wayne Mar 21 '11 at 18:55

score 2 · Answer 2 · answered Mar 21 '11 at 18:52

The coordinates are relative to the page, but they are being plotted relative to the canvas.

Thus, the points are off by the distance from the upper left corner of the canvas to the upper left corner of the page. You need to correct for this by subtracting the values of canvas.offset().left and canvas.offset().top from the X and Y coordinates.

Canvas relative position

2 Answers2