coordinates mouse canvas

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 !

Do you have to define function mousemove() before you try and call it? — Brant, Nov 08 '12 at 19:57
That's irrelevant at runtime. Function declarations are hoisted up. — Fabrício Matté, Nov 08 '12 at 19:58

Denys Séguret · Accepted Answer · 2012-11-08T20:41:04.017

0

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

edited Nov 08 '12 at 20:41

answered Nov 08 '12 at 19:58

Denys Séguret

372,613
87
782
758

guys how you so fast answer in my questions?:D thx, i try this method tommorow – Arti Nov 08 '12 at 20:04
I copy pasted from one of my old programs. – Denys Séguret Nov 08 '12 at 20:05
If you can use jQuery, I'd recommend to use it, not because the other solution is bad but to have a cleaner and lighter code. – Denys Séguret Nov 08 '12 at 20:10
This doesn't work. Also recommending using jQuery for anything canvas related is a terrible idea. Including over 2k lines of code just to get the mouse coords (which is quite easy in JS) is pretty bad advice. – Loktar Nov 08 '12 at 20:32
@dystroy thats not my intention. I rarely down vote. This flat out doesn't work though (the code you posted), thats the reason for the down vote. – Loktar Nov 08 '12 at 20:41
ah, you're just getting the top and left, the OP wants the mouse coordinates (at least that is my assumption) within the canvas where clicked. I think thats where the confusion lies. Ill remove the downvote as it does work for what you're doing :P – Loktar Nov 08 '12 at 20:42

Loktar · Answer 2 · 2012-11-09T16:17:51.723

0

Live Demo

Its pretty easy actually without jQuery. Below is the important part from the fiddle. cX and cY are the coordinates of the clicked canvas.

function clicked(e) {
    var cX = 0,
        cY = 0;

    if (event.pageX || event.pageY) {
        cX = event.pageX;
        cY = event.pageY;
    }
    else {
        cX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        cY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    cX -= canvas.offsetLeft;
    cY -= canvas.offsetTop;

    ctx.fillRect(cX, cY, 2, 2);

}

Demo with mouse move

edited Nov 09 '12 at 16:17

answered Nov 08 '12 at 20:28

Loktar

34,764
7
90
104

@user1786016 applying it to the mouse move works the same. I just added another demo link with mouse move. – Loktar Nov 09 '12 at 16:18

coordinates mouse canvas

2 Answers2