Canvas: Jak pobrać pozycję kursora myszy?

Jak pobrać współrzędne?

Żeby pobrać pozycję kursora myszy, w obrębie Canvas potrzebujesz dwa rodzaje informacji: pozycję kursora i pozycję płótna.

Pozycja (0, 0) oznacza lewy górny róg płótna.

Przykład działającego przykładu znajdziesz tutaj

Przykład

HTML:

<div>
    <strong>X: <span id="x"></span></strong>
    <br>
    <strong>Y: <span id="y"></span></strong>
</div>
<br>
<canvas id="canvas" width="800" height="600"></canvas>

JavaScript:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const x = document.getElementById('x');
const y = document.getElementById('y');

context.fillStyle = '#000';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);

canvas.addEventListener('mousemove', (e) => {
	const canvasRect = canvas.getBoundingClientRect();
	const posX = Math.round(e.clientX - canvasRect.left);
	const posY = Math.round(e.clientY - canvasRect.top);
	x.innerHTML = posX;
	y.innerHTML = posY;
});

Mając informację o pozycji kursora: e.clientX i e.clientY oraz pozycji płótna: canvasRect.left i canvasRect.top możemy obliczyć pozycję kursora w Canvas. Zmienne: posX i posY.