Resta el origen del canvas y aplica la escala al punto
Parte de clientX y clientY del evento y del rectángulo devuelto por canvas.getBoundingClientRect(). Ese rectángulo se expresa respecto al área visible del navegador: resta sus valores left y top antes de aplicar la escala. Si el juego lógico mide 800 por 450 y se muestra en un rectángulo de 400 por 225, multiplica las coordenadas locales x e y por dos. Así, el centro visible corresponde al punto lógico (400, 225), independientemente del desplazamiento de la página.
Usa el rectángulo real del contenido, sin deducirlo del ancho de la ventana. Ten en cuenta los bordes CSS y el relleno exterior del canvas, y actualiza la conversión al cambiar el tamaño o la orientación. Si el juego aplica un desplazamiento de cámara, bandas vacías u otra transformación del mundo, deshaz esas operaciones en orden inverso antes de comparar el punto con las áreas de detección de clics.
Prueba toda la superficie, incluidos los espacios vacíos
Dibuja una cruz temporal en la posición convertida del puntero y prueba las cuatro esquinas del canvas, el centro y cada borde de un objetivo. Para comprobar la calibración, pulsa el centro de un círculo dibujado y verifica que el punto obtenido esté cerca de su centro en el mundo del juego. Después pulsa justo fuera para comprobar que el límite de detección respeta el margen de tolerancia previsto. MDN define clientX respecto al área visible del navegador y getBoundingClientRect() devuelve los límites del elemento respecto a esa misma área. Usar ambas medidas evita mezclar sistemas de coordenadas.
Vincula el dibujo y las zonas de pulsación
Guarda una sola vez la posición y las dimensiones del objetivo en el mundo del juego, y usa esos datos tanto para dibujarlo como para comprobar si el puntero cae dentro. Evita introducir a mano coordenadas de pantalla distintas para el icono visible y su zona de pulsación. Repite las pruebas al cambiar la escala del canvas, su tamaño CSS, la relación de píxeles del dispositivo o el desplazamiento de la cámara. Si la posición de prueba es correcta pero el objetivo sigue sin responder, revisa los cálculos de su forma y el orden de procesamiento de la entrada antes de añadir desplazamientos arbitrarios en píxeles.
Preguntas sobre coordenadas de detección de pulsaciones en canvas
¿Conviene usar offsetX y offsetY para detectar pulsaciones en un canvas?
Pueden resultar prácticos en un canvas sencillo sin transformaciones. Sin embargo, usar explícitamente las coordenadas del evento, los límites del elemento y la transformación del juego permite entender cada paso cuando cambia el diseño o la escala de la cámara.
¿Debo incluir devicePixelRatio en la conversión del puntero?
Solo si tanto el punto del puntero como las formas de detección usan píxeles del búfer interno del canvas. Lo habitual es convertir las coordenadas del área visible a unidades lógicas del juego y aplicar la escala de píxeles del dispositivo únicamente al dibujar.
Más información
¿Has visto algo desactualizado? Notificar una corrección