Soustraire l’origine du canvas et appliquer l’échelle au point
Partez des propriétés clientX et clientY de l’événement et du rectangle renvoyé par canvas.getBoundingClientRect(). Ce rectangle est positionné par rapport à la zone visible du navigateur : soustrayez ses valeurs left et top avant d’appliquer l’échelle. Si le jeu logique mesure 800 par 450 et que le rectangle affiché mesure 400 par 225, multipliez les coordonnées locales x et y par deux. Le centre affiché correspond alors au point logique (400, 225), quelle que soit la position de défilement de la page.
Utilisez le rectangle réel du contenu, sans le déduire de la largeur de la fenêtre. Tenez compte des bordures CSS et des marges internes autour du canvas, puis actualisez la conversion après un redimensionnement ou un changement d’orientation. Si le jeu applique un décalage de caméra, des bandes vides ou une autre transformation du monde, annulez ces opérations dans l’ordre inverse avant de comparer le point aux formes des zones cliquables.
Tester toute la surface, y compris les espaces vides
Placez un réticule temporaire à la position convertie du pointeur et testez les quatre coins du canvas, son centre et chaque bord d’une cible. Pour vérifier le calibrage, cliquez au centre d’un cercle dessiné et confirmez que le point obtenu dans le monde du jeu est proche de ce centre. Cliquez ensuite juste à l’extérieur pour vérifier que la limite de détection respecte la marge de tolérance prévue. MDN décrit clientX comme une coordonnée relative à la zone visible du navigateur, et getBoundingClientRect() comme renvoyant les limites de l’élément par rapport à cette même zone. Associer ces mesures évite de mélanger les systèmes de coordonnées.
Relier le rendu aux zones cliquables
Enregistrez une seule fois la position et les dimensions d’une cible dans le monde du jeu, puis utilisez ces données pour la dessiner et vérifier si le pointeur se trouve dedans. Évitez de saisir séparément des coordonnées d’écran pour l’icône visible et sa zone cliquable. Recommencez les tests après une modification de l’échelle du canvas, de sa taille CSS, du ratio de pixels de l’appareil ou du décalage de caméra. Si le repère de coordonnées est correct mais que la cible ne réagit toujours pas, vérifiez les calculs de sa forme et l’ordre de traitement des entrées avant d’ajouter des décalages arbitraires en pixels.
Questions sur coordonnées de détection des clics dans un canvas
Faut-il utiliser offsetX et offsetY pour détecter les clics dans un canvas ?
Ces propriétés peuvent être pratiques pour un canvas simple sans transformation. Utiliser explicitement les coordonnées de l’événement, les limites de l’élément et la transformation du jeu rend toutefois chaque étape plus claire lorsque la mise en page ou l’échelle de la caméra change.
Faut-il inclure devicePixelRatio dans la conversion du pointeur ?
Uniquement si le point du pointeur et les formes de détection utilisent les pixels du tampon interne du canvas. Une méthode courante consiste à convertir les coordonnées de la zone visible en unités logiques du jeu et à réserver l’échelle des pixels de l’appareil à la transformation de rendu.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction