I am trying to get the coordinates of the mouse-click on a image. So I'm using getBoundingClientRect like this

function showCoords(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y);
}

I am trying to get the coordinates of the mouse-click on a image. So I'm using getBoundingClientRect like this

function showCoords(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y);
}

But I get this error "canvas.getBoundingClientRect is not a function"

• javascript
• html

• 1 really depends on how you call showCoords - what do you pass as the first argument – Jaromanda X Commented Jan 16, 2018 at 22:01

1 Answer 1

That means that canvas variable is not actually a Canvas element.

It can be undefined, still not initialized or incorrectly selected.

You need to double check it and maybe try to use event.target if the click event is added to the canvas element.