javascript - How do I get the coordinates of a mouse click on a canvas element?

Question

This question already has answers here:

Answer 1

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