javascript - How do I get the coordinates of a mouse click on a canvas element?

ID : 10056

viewed : 14

Tags : javascriptcanvasjavascript

Top 5 Answer for javascript - How do I get the coordinates of a mouse click on a canvas element?

vote vote

97

If you like simplicity but still want cross-browser functionality I found this solution worked best for me. This is a simplification of @AldekeinĀ“s solution but without jQuery.

function getCursorPosition(canvas, event) {     const rect = canvas.getBoundingClientRect()     const x = event.clientX - rect.left     const y = event.clientY - rect.top     console.log("x: " + x + " y: " + y) }  const canvas = document.querySelector('canvas') canvas.addEventListener('mousedown', function(e) {     getCursorPosition(canvas, e) }) 
vote vote

90

Update (5/5/16): patriques' answer should be used instead, as it's both simpler and more reliable.


Since the canvas isn't always styled relative to the entire page, the canvas.offsetLeft/Top doesn't always return what you need. It will return the number of pixels it is offset relative to its offsetParent element, which can be something like a div element containing the canvas with a position: relative style applied. To account for this you need to loop through the chain of offsetParents, beginning with the canvas element itself. This code works perfectly for me, tested in Firefox and Safari but should work for all.

function relMouseCoords(event){     var totalOffsetX = 0;     var totalOffsetY = 0;     var canvasX = 0;     var canvasY = 0;     var currentElement = this;      do{         totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;         totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;     }     while(currentElement = currentElement.offsetParent)      canvasX = event.pageX - totalOffsetX;     canvasY = event.pageY - totalOffsetY;      return {x:canvasX, y:canvasY} } HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords; 

The last line makes things convenient for getting the mouse coordinates relative to a canvas element. All that's needed to get the useful coordinates is

coords = canvas.relMouseCoords(event); canvasX = coords.x; canvasY = coords.y; 
vote vote

76

Edit 2018: This answer is pretty old and it uses checks for old browsers that are not necessary anymore, as the clientX and clientY properties work in all current browsers. You might want to check out Patriques Answer for a simpler, more recent solution.

Original Answer:
As described in an article i found back then but exists no longer:

var x; var y; if (e.pageX || e.pageY) {    x = e.pageX;   y = e.pageY; } else {    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;  }  x -= gCanvasElement.offsetLeft; y -= gCanvasElement.offsetTop; 

Worked perfectly fine for me.

vote vote

65

Modern browser's now handle this for you. Chrome, IE9, and Firefox support the offsetX/Y like this, passing in the event from the click handler.

function getRelativeCoords(event) {     return { x: event.offsetX, y: event.offsetY }; } 

Most modern browsers also support layerX/Y, however Chrome and IE use layerX/Y for the absolute offset of the click on the page including margin, padding, etc. In Firefox, layerX/Y and offsetX/Y are equivalent, but offset didn't previously exist. So, for compatibility with slightly older browsers, you can use:

function getRelativeCoords(event) {     return { x: event.offsetX || event.layerX, y: event.offsetY || event.layerY }; } 
vote vote

52

According to fresh Quirksmode the clientX and clientY methods are supported in all major browsers. So, here it goes - the good, working code that works in a scrolling div on a page with scrollbars:

function getCursorPosition(canvas, event) { var x, y;  canoffset = $(canvas).offset(); x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left); y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;  return [x,y]; } 

This also requires jQuery for $(canvas).offset().

Top 3 video Explaining javascript - How do I get the coordinates of a mouse click on a canvas element?

Related QUESTION?