How do I get the coordinates of a mouse click on a canvas element? [duplicate]

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)})

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;

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.