# Choisissez délibérément une densité de pixels de toile

> Équilibrez la résolution du support de toile, le rapport de pixels de l'appareil, l'utilisation de la mémoire et le coût de dessin lorsqu'un jeu doit être clair sur tous les écrans.

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

Un canevas a une taille d’affichage CSS et un magasin de sauvegarde en pixels. Lorsque ces tailles diffèrent, le navigateur met à l'échelle le bitmap dessiné, ce qui peut rendre l'art plus doux ; faire correspondre chaque pixel de l'appareil peut améliorer la netteté mais augmente le nombre de pixels que le jeu doit traiter. Le bon réglage dépend du style artistique et du budget de rendu. Les sprites pixel-art peuvent nécessiter une mise à l'échelle entière et des choix de voisins les plus proches, tandis qu'une interface de dessin au trait peut bénéficier d'une résolution de support plus élevée.

## Mesurez la boîte CSS avant de définir les pixels

Lisez les dimensions du canevas affichées, multipliez par l'échelle de l'appareil choisi, définissez la largeur et la hauteur du support et transformez les coordonnées du dessin afin que la logique du jeu puisse continuer à utiliser les unités d'espace CSS. Réappliquez la transformation après avoir modifié la largeur ou la hauteur, car l'attribution de ces attributs de canevas réinitialise son état de dessin.

Comparez une grille d'un pixel, des bords diagonaux et un petit texte d'interface utilisateur à des facteurs d'échelle tels que 1, 1,5 et 2. Vérifiez à la fois la netteté et la réactivité. Un multiplicateur complet de devicePixelRatio est un point de départ, pas une règle que chaque jeu devrait suivre ; réduire l'échelle de rendu peut réduire les coûts sur les affichages denses tout en laissant la mise en page CSS inchangée.

## Considérez le redimensionnement et la mémoire comme faisant partie du choix

Le nombre de pixels du backing-store augmente avec les deux dimensions, donc doubler l’échelle dans chaque direction crée quatre fois plus de pixels. Testez une scène chargée avec la plus grande taille d'affichage prise en charge et recherchez la pression de la mémoire ou les redessins plus lents avant d'expédier un paramètre haute densité.

Les conseils de canevas de MDN montrent une configuration basée sur devicePixelRatio. La page des meilleures pratiques de WebGL fait ressortir les subtilités des ratios et du zoom non entiers. Revérifiez après le zoom du navigateur ou le déplacement d'une fenêtre entre les affichages, et évitez de réinitialiser à plusieurs reprises le magasin de sauvegarde si ses dimensions effectives n'ont pas changé.

## Questions

**La largeur du canevas doit-elle toujours être égale à la largeur CSS multipliée par devicePixelRatio ?** Non. Cela peut affiner le contenu mais multiplie le travail et la mémoire. Comparez une version pleine résolution avec une échelle plafonnée en utilisant la même scène et les mêmes contrôles visuels.

**Pourquoi le dessin devient-il flou après le redimensionnement ?** La modification de la largeur ou de la hauteur du canevas efface son bitmap et réinitialise l'état du contexte. Recalculez ses dimensions de support, redimensionnez le contexte et redessinez la scène.

## Suivez votre curiosité

- [Trouver les goulots d’étranglement du rendu Canvas](https://oneshotgems.ai/fr/topics/canvas-game-performance): Profilez un jeu 2D sur Canvas avec des scènes reproductibles et ne réduisez les opérations de dessin coûteuses qu’après avoir mesuré où le temps est passé.
- [Gérer correctement le redimensionnement d’un jeu dans le navigateur](https://oneshotgems.ai/fr/topics/game-resize-handling): Gardez les coordonnées du jeu, les dimensions du canevas et la mise en page synchronisées lorsque le joueur redimensionne la fenêtre ou change l’orientation.
- [Rendre les atlas de sprites de manière fiable sur canvas](https://oneshotgems.ai/fr/topics/sprite-atlas-rendering): Gardez les cadres de l'atlas des sprites alignés en définissant des rectangles sources, des règles de découpage, des pivots et des contrôles de chargement dans une seule carte de rendu.

## Pour aller plus loin

- [MDN : optimisation du canevas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)
- [MDN : bonnes pratiques WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices)

---
Page canonique: https://oneshotgems.ai/fr/topics/canvas-pixel-density