How Do I Get Mouse Click Coordinates on a Canvas Element?

Getting Mouse Click Coordinates on a Canvas Element

To obtain the x and y coordinates of a mouse click relative to a canvas element, follow these steps:

1. Define the Event Handler:

   canvas.addEventListener('mousedown', function(e) {
       // Code to get cursor position
   })

2. Calculate Cursor Position:
   Inside the event handler, use the getBoundingClientRect() method to get the canvas's position relative to the screen and then subtract the click event coordinates from it to find the relative position:

   const rect = canvas.getBoundingClientRect()
   const x = event.clientX - rect.left
   const y = event.clientY - rect.top

3. Log Coordinates:
   Finally, you can output the coordinate values to the console or use them in your application:

   console.log("x: " + x + " y: " + y)

Example:

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

This solution provides cross-browser compatibility for Safari, Opera, and Firefox. For legacy browser support, consider using jQuery or a cross-browser library.

The above is the detailed content of How Do I Get Mouse Click Coordinates on a Canvas Element?. For more information, please follow other related articles on the PHP Chinese website!