Tengo un lienzo de 16x16 escalado con CSS ( width:90%; height: auto; ) y estoy intentando convertir las coordenadas del mouse en el lienzo a uno de los 16x16 píxeles. Lo estoy tomando de un evento onmousemove , y aunque puedo obtener las coordenadas de la pantalla sin procesar, necesito llegar a donde se encuentra en el lienzo.
Prueba esto:
const canvas = document.querySelector( 'canvas' ); canvas.addEventListener( 'mousemove', event => { const bb = canvas.getBoundingClientRect(); const x = Math.floor( (event.clientX - bb.left) / bb.width * canvas.width ); const y = Math.floor( (event.clientY - bb.top) / bb.height * canvas.height ); console.log({ x, y }); }); html,body { height: 100%; } canvas { width: 100%; height: 100%; } <canvas width="16" height="16"></canvas> Simplemente tome la coordenada, tome el desplazamiento del lienzo (pantalla completa que sería 0 ), luego divídalo por el ancho visual del lienzo y multiplíquelo por el ancho real del lienzo. Si floor eso, obtiene una coordenada de píxel redondeada.
El código anterior funciona para lienzos de cualquier tamaño, ya que tiene en cuenta el desplazamiento que tiene desde la pantalla (también client en las coordenadas del mouse). Entonces, sea cual sea el ancho de su lienzo, esto debería devolver el píxel correcto.