canvas onclick coordinates using getBoundingClientRect always the same

canvas, html

Solution

That's because you always use the absolute position of the element returned by `getBoundingClientRect`, and not the mouse position.

Try this instead:

canvas.addEventListener('click', function(e) {  // use event argument

    var rect = canvas.getBoundingClientRect();  // get element's abs. position
    var x = e.clientX - rect.left;              // get mouse x and adjust for el.
    var y = e.clientY - rect.top;               // get mouse y and adjust for el.

    alert('Mouse position: ' + x + ',' + y);
    ...

Modified fiddle

Problem

I am trying to use getBoundingClientRect to get the coordinates of my click on canvas, but am always getting the same result. My code is here: http://fiddle.jshell.net/nH74F/1/ As you can see i always get 8,8 No idea why, is there another way to get this info?

Original source