Get the mouse coordinates when clicking on canvas

Question

A common question, but I still need help. I\'m trying to get and store the mouse coordinates when someone clicks within the canvas.

my HTML

Answer 1

I am using this piece of code.

var myCanvas = document.querySelector('#canvas');

myCanvas.addEventListener('click', function(event) {
    var rect = myCanvas.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y); 
}, false);