html - canvas onclick coordinates using getBoundingClientRect always the same

Question

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?

Answer 1

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