# Utiliser la même conversion de coordonnées pour le dessin et la détection des clics

> Convertissez la position du pointeur en coordonnées du monde du jeu pour que les cibles visibles et leurs zones cliquables restent alignées après un changement d’échelle.

- URL: https://oneshotgems.ai/fr/topics/hit-testing-canvas-coordinates
- Catégorie: Pour les développeurs de jeux
- Type: Guide
- Mis à jour le: 5 octobre 2026

Un bouton dessiné dans un canvas peut se trouver exactement sous le pointeur sans réagir : l’événement est mesuré en pixels de la zone visible du navigateur, alors que le jeu dessine en unités de son monde logique. Choisissez un système de coordonnées pour la détection des clics, puis convertissez chaque position du pointeur en tenant compte de la transformation utilisée pour dessiner le terrain. Ce guide porte sur cette conversion. Il complète la conception d’une mise en page adaptative en suivant un point depuis la page jusqu’à une cible logique, y compris dans les bandes vides qui entourent un jeu de taille fixe.

## 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

**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.

## Suivez votre curiosité

- [Utiliser les événements de pointeur pour la saisie de jeux par navigateur](https://oneshotgems.ai/fr/topics/pointer-events-for-games): Modélisez la souris, le stylet et le toucher via des événements de pointeur, tout en préservant la capture, l'identité de l'appareil et le comportement de compatibilité dans une boucle de jeu.
- [Créer des mises en page adaptatives pour les jeux web](https://oneshotgems.ai/fr/topics/responsive-game-layouts): Adaptez une surface de jeu à son conteneur sans lier l'état de simulation aux dimensions de l'écran et testez la disposition dans des fenêtres changeantes.

## Pour aller plus loin

- [MDN clientX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
- [MDN getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

---
Page canonique: https://oneshotgems.ai/fr/topics/hit-testing-canvas-coordinates