HTML — La balise <canvas>

La balise <canvas>

La balise <canvas> est un élément HTML qui crée une zone de dessin rectangulaire pilotée par JavaScript. Seule, elle n'affiche rien — c'est JavaScript qui prend le relais pour y tracer des formes, des courbes, des images ou des animations. Pensez-y comme une toile blanche : le pinceau, c'est le script.

En pratique, on l'utilise pour des graphiques de données, des jeux 2D, des effets visuels, des éditeurs de photo en ligne ou des visualisations interactives. Tout ce qu'un navigateur peut afficher à l'écran, <canvas> peut le dessiner pixel par pixel.

La balise nécessite une balise ouvrante et une balise fermante. Le texte placé entre les deux sert de message de remplacement pour les rares navigateurs qui ne supportent pas canvas — en 2026, tous les navigateurs modernes le prennent en charge.

Pour aller plus loin : notre tutoriel complet sur l'élément <canvas> couvre les tracés, les dégradés, les images et les animations.

Syntaxe de base

On définit la zone de dessin avec les attributs width et height, puis on la cible depuis JavaScript via son id.

<canvas id="monCanvas" width="300" height="150">
  Votre navigateur ne prend pas en charge la balise canvas.
</canvas>

Exemple — Dessiner un rectangle rouge

Voici le minimum pour dessiner sur un canvas : on récupère l'élément par son id, on obtient le contexte de rendu 2D, puis on remplit un rectangle. La méthode fillRect(x, y, largeur, hauteur) positionne et dimensionne la forme.

<canvas id="monCanvas" width="200" height="150">
  Votre navigateur ne prend pas en charge la balise canvas.
</canvas>

<script>
  const c = document.getElementById('monCanvas');
  const ctx = c.getContext('2d');
  ctx.fillStyle = '#FF0000'; /* couleur de remplissage : rouge */
  ctx.fillRect(10, 10, 120, 80); /* x, y, largeur, hauteur */
</script>

Exemple — Dessiner un texte et un cercle

Le contexte 2D propose bien d'autres méthodes. Voici comment afficher du texte et tracer un cercle avec arc() — deux opérations très courantes.

<canvas id="demo" width="300" height="200"></canvas>

<script>
  const ctx = document.getElementById('demo').getContext('2d');

  /* Texte */
  ctx.font = '20px Arial';
  ctx.fillStyle = '#333';
  ctx.fillText('Bonjour canvas !', 20, 40);

  /* Cercle */
  ctx.beginPath();
  ctx.arc(150, 130, 50, 0, Math.PI * 2); /* x, y, rayon, angle début, angle fin */
  ctx.fillStyle = '#3498db';
  ctx.fill();
</script>

Attributs de la balise <canvas>

 Astuce : Définissez toujours width et height directement dans la balise HTML, pas en CSS. Redimensionner un canvas en CSS sans toucher à ces attributs étire le contenu dessiné et produit un rendu flou.

Attributs globaux et événements

La balise <canvas> accepte tous les attributs globaux HTML (comme class, id, style) ainsi que tous les attributs d'événement (comme onclick, onmousemove). Ces derniers sont particulièrement utiles pour créer des interactions — détecter où l'utilisateur clique ou déplace la souris sur la toile.

Par carabde | 10 mars 2014 | Mis à jour le 3 juin 2026