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

Getting Coordinates of Mouse Clicks on a Canvas Element

Determining the coordinates of mouse clicks on a canvas element is crucial for various applications. Here's a cross-browser solution that works in Safari, Opera, and Firefox:

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 code snippet uses the getBoundingClientRect() method to obtain the canvas element's position within the document. It then calculates the x and y coordinates of the mouse click relative to the canvas element's origin.

By adding an event listener for the mousedown event, you can capture mouse clicks and retrieve the coordinates using the getCursorPosition function. This information can be further processed for various purposes, such as object manipulation or user interaction within the canvas element.

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