How to find coordinates in canvas

Question

I have a Raphael paper and I want find the coordinates relative to my paper

My html:

<div style='width:100%;'>
  <div id='mycanvas' class='canvas'></div>
</div>

My Javascript:

var mypaper = Raphael(mycanvas, '100%', '100%');
...
document.getElementById('mycanvas').onmouseover=function(event) {
    var canvasPos = {
        x: this.offsetLeft,
        y: this.offsetTop
    };
    var coord = {
        x: event.pageX-canvasPos.x,
        y: event.pageY-canvasPos.y
    };
};

I expect coord.x and coord.y to be zero for the top left corner of mypaper but it isn't

Well... I don't know what they rappresent. Maybe absolute position on the screen? — fabio, Jun 14 '17 at 20:00
Yes, they are numbers but different from pageX, screenX, clientX — fabio, Jun 14 '17 at 20:11
I mean what is their literall value. i.e. `console.log(convasPos.x)` spits out what? — MBurnham, Jun 14 '17 at 20:12
For the class I have a border from javascript and I have some style for the divs but by id — fabio, Jun 14 '17 at 20:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146701/discussion-between-fabio-and-mburnham). — fabio, Jun 14 '17 at 20:36

score 2 · Answer 1 · answered Jun 14 '17 at 21:07

2

So at last, I found an answer

function getCursorPosition(canvas, event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
console.log("x: " + x + " y: " + y);

}

answered Jun 14 '17 at 21:07

fabio

1,210
2
26
55

How to find coordinates in canvas

1 Answers1