Retrieving Mouse Click Coordinates on a Canvas Element
This question revolves around obtaining the precise coordinates of a mouse click relative to a canvas element. For modern browsers like Safari, Opera, and Firefox, a streamlined solution exists that obviates the need for jQuery.
The provided JavaScript code offers an eloquent approach to this task:
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 efficiently captures the mouse click position by leveraging the getBoundingClientRect() method and calculating the relative x and y coordinates. The console.log() call displays these coordinates, providing a clear indication of the click's location within the canvas element.
The above is the detailed content of How Do I Get Mouse Click Coordinates on a Canvas Element in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!