1

I have an HTML file with a <canvas> element and I am trying to get the mouse coordinates in the click event. I am using this code:

secondCanvas.addEventListener('click', function(e) {
    console.log(e.pageX)
}, false);

When I click on the top left point I get in console 500~ number, not zero... what do I need to do to get the coordinates of the mouse on the canvas?

kiswa
  • 14,737
  • 1
  • 21
  • 29
foreee
  • 11
  • 1
  • 1
  • 2

3 Answers3

3

You should calculate the canvas mouse position by substracting the canvas element offset from the event offset (e.pageX and e.pageY).
Here's a link that explains how to get an element position in the dom, and the code should look like : 

secondCanvas.addEventListener('click', function(e) {
   var pos = {
       x : e.pageX - canvasOffsetX,
       y : e.pageY - canvasOffsetY
   };
   console.log(pos.x)
}, false);
Community
  • 1
  • 1
gion_13
  • 41,171
  • 10
  • 96
  • 108
  • 1
    +1 To get the offset, unless you need to support old browsers, I'd suggest using `element.getBoundingClientRect();` which returns an object with top bottom left right properties – UpTheCreek Apr 03 '13 at 20:31
1

It's because you're getting page coordinates. I'm guessing you want the current mouse position within either one of your two canvases? Hopefully this will solve your problem:

http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

Also this stackoverflow is similar to yours and might give you a better understanding: Tracking mouse position in canvas when no surrounding element exists

Solution by user: lwburk

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

$('#canvas').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coordinateDisplay = "x=" + x + ", y=" + y;
    writeCoordinateDisplay(coordinateDisplay);
});
Community
  • 1
  • 1
Jack
  • 15,614
  • 19
  • 67
  • 92
-1

I use this code and it works perfectly for me. Once added, canvas mouse events have two new properties: canvasX, and canvasY which are properly mapped. Right after you obtained the canvas element, don't forget to call canvas.extendMouseEvents() and you're in business.

HTMLCanvasElement.prototype.extendMouseEvents = function() {
    this.mapMouseEvent = function(ev) {
        var r = this.getBoundingClientRect();
        ev.canvasX = ev.pageX - r.left;
        ev.canvasY = ev.pageY - r.top;
    };
    this.addEventListener("mousemove", this.mapMouseEvent);
    this.addEventListener("click", this.mapMouseEvent);
    this.addEventListener("contextmenu", this.mapMouseEvent);
    this.addEventListener("dblclick", this.mapMouseEvent);
    this.addEventListener("mousedown", this.mapMouseEvent);
    this.addEventListener("mouseenter", this.mapMouseEvent);
    this.addEventListener("mouseleave", this.mapMouseEvent);
    this.addEventListener("mouseover", this.mapMouseEvent);
    this.addEventListener("mouseout", this.mapMouseEvent);
    this.addEventListener("mouseup", this.mapMouseEvent);
}
Adi Degani
  • 187
  • 2
  • 4