How to get the coordinates of a mouse click on a canvas element ?

16 Oct, 2019
The coordinates of the mouse whenever a click takes place can be found by detecting the click event with an event listener and finding the event’s x and y position.
A function is created which takes in the canvas element and event as parameters. The dimension of the canvas is found using the getBoundingClientRect() function. This method returns the size of an element and its position relative to the viewport.
The position of x-coordinate of the mouse click is found by subtracting the event’s x position with the bounding rectangle’s x position. The x position of the event is found using the ‘clientX’ property. The x position of the canvas element, i.e. the left side of the rectangle can be found using the ‘left’ property.
Similarly, the position of y-coordinate of the click is found by subtracting the event’s y position with the bounding rectangle’s y position. The y-position of the event is found using the ‘clientY’ property. The y-position of the canvas element, i.e. the top side of the rectangle can be found using the ‘top’ property.
This subtraction will compensate for the location of the canvas on the page as the event’s x and y position would be relative to the page and not the canvas.
To detect the click, the canvas element is first selected using the querySelector() method. The addEventListener() method is used on this element to listen the ‘mousedown’ event. This event is triggered whenever a mouse button is pressed down. The callback of this function is used to call the function created above to detect the position of the click.
Example:
<!DOCTYPE html><html>      <head>    <title>        How to get the coordinates of a mouse        click on a canvas element?    </title></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>          <b>        How do I get the coordinates of a         mouse click on a canvas element?    </b>          <p>        Click anywhere on the canvas element        to get the mouse pointer location.    </p>          <p>        The size of the canvas        is a square of 200px.    </p>          <p>Check the console for the output.</p>          <canvas width="200" height="200"        style="background-color: green">    </canvas>      <script type="text/javascript">        function getMousePosition(canvas, event) {            let rect = canvas.getBoundingClientRect();            let x = event.clientX - rect.left;            let y = event.clientY - rect.top;            console.log("Coordinate x: " + x,                         "Coordinate y: " + y);        }              let canvasElem = document.querySelector("canvas");                  canvasElem.addEventListener("mousedown", function(e)        {            getMousePosition(canvasElem, e);        });    </script></body>  </html>
Output:
Before Clicking anywhere to canvas:
After clicking in the canvas:
HTML-Canvas
HTML-Property
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?