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

You could achieve that by using the offsetX and offsetY property of MouseEvent

//setup canvas
var canvasSetup = document.getElementById("puppyCanvas");
var ctx = canvasSetup.getContext("2d");
guessX = 0; //stores user's click on canvas
guessY = 0; //stores user's click on canvas
function storeGuess(event) {
    var x = event.offsetX;
    var y = event.offsetY;
    guessX = x;
    guessY = y;
    console.log("x coords: " + guessX + ", y coords: " + guessY);
}