<canvas>

Description

L’élément <canvas> crée une surface de rendu graphique contrôlée exclusivement par JavaScript via son API Canvas 2D ou WebGL. Il ne contient aucun graphique par lui-même — tout est dessiné via getContext('2d') ou getContext('webgl'). Le contenu entre les balises sert de repli textuel pour les navigateurs sans support.

Syntaxe

<canvas id="mon-canvas" width="800" height="450">
  Votre navigateur ne supporte pas l'élément canvas.
</canvas>

Exemples

Dessin d’un rectangle avec Canvas 2D :

<canvas id="demo" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById('demo');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = '#336699';
  ctx.fillRect(10, 10, 150, 100);

  ctx.strokeStyle = '#ff6600';
  ctx.strokeRect(200, 10, 150, 100);
</script>

Graphique dynamique :

<canvas id="graphique" width="600" height="300" aria-label="Graphique de ventes mensuel"></canvas>

Attributs spécifiques

Attribut	Type	Description
width	integer	Largeur intrinsèque du canvas en pixels CSS (défaut : 300). Indépendant de la taille CSS.
height	integer	Hauteur intrinsèque du canvas en pixels CSS (défaut : 150).

Notes

Taille CSS vs taille canvas : width et height définissent la résolution interne du canvas. La taille d’affichage se contrôle séparément via CSS. Si vous avez width="300" mais style="width: 600px", le canvas sera étiré.

Accessibilité limitée : <canvas> est une image bitmap inaccessible par nature. Toujours fournir une alternative textuelle via le contenu de repli, aria-label, ou un tableau de données alternatif si le canvas présente des informations critiques.

Haute résolution (Retina) : pour les écrans haute densité, utiliser devicePixelRatio pour multiplier les dimensions du canvas et réduire la taille CSS en conséquence.