La balise HTML <canvas>

La balise <canvas> est l'un des éléments HTML5. Elle définit une zone sur la page web dans laquelle nous pouvons créer différents objets, images, animations et compositions photo via des scripts (généralement JavaScript). Vous devez utiliser un script pour dessiner des graphiques, car la balise <canvas> n'est qu'un conteneur pour les graphiques.

Lorsqu'on travaille avec canvas, il est important de distinguer deux concepts souvent confondus : l'élément canvas et le contexte d'un élément. L'élément est ce qui est intégré à HTML (le nœud DOM). Un contexte canvas est un objet doté de ses propriétés et méthodes de rendu. Le contexte peut être 2D ou 3D. L'élément canvas ne peut avoir qu'un seul contexte.

Vous devez fournir un contenu alternatif à l'intérieur de la balise <canvas> afin que les navigateurs plus anciens ne prenant pas en charge canvas, les navigateurs avec JavaScript désactivé et les lecteurs d'écran puissent afficher quelque chose de significatif (voir Accessibilité ci-dessous).

Vous pouvez utiliser CSS pour modifier la taille affichée du canvas, mais il est préférable de définir la résolution avec les attributs width et height sur <canvas> — soit en HTML soit depuis JavaScript — pour éviter un bitmap flou ou étiré.

Par défaut, un élément <canvas> a une taille de 300x150 pixels.

Canvas vs. SVG : lequel utiliser ?

<canvas> et <svg> dessinent tous deux des graphiques dans le navigateur, mais ils fonctionnent de manière fondamentalement différente :

• Canvas est basé sur les pixels (mode immédiat). Une fois que vous dessinez quelque chose, cela devient un bitmap plat — le navigateur ne conserve aucune mémoire des formes individuelles. Il n'y a pas de DOM pour le contenu dessiné, vous ne pouvez donc pas attacher d'écouteurs d'événements à une forme ; pour « déplacer » un cercle, vous effacez et redessinez toute la scène à chaque image.
• SVG est basé sur les formes (mode retenu). Chaque élément reste dans le DOM, peut être stylisé avec CSS, scripté, et est indépendant de la résolution (il reste net à n'importe quel niveau de zoom).

Utilisez canvas lorsque vous redessinez fréquemment ou que vous avez de nombreux objets : jeux, effets de particules, visualisation de données en temps réel, traitement d'images. Utilisez SVG lorsque vous avez un nombre modéré de formes devant être interactives, accessibles ou redimensionnées sans perte : icônes, graphiques, diagrammes. En règle générale, canvas excelle avec beaucoup de pixels changeant rapidement, SVG avec moins de formes restant interactives.

Dimensionnement : les attributs width/height vs. CSS

C'est l'écueil le plus courant avec canvas. Un canvas a deux tailles :

• Les attributs width et height définissent la taille du tampon de dessin (sa résolution en pixels).
• Le CSS width/height définit la taille affichée sur la page.

Si elles diffèrent, le navigateur étire le bitmap pour s'adapter à la boîte CSS, ce qui brouille ou déforme votre dessin. Définissez toujours les attributs à la résolution à laquelle vous dessinez ; n'utilisez CSS pour mettre en page l'élément que si les deux correspondent.

<!-- Good: drawing buffer matches what you draw -->
<canvas width="400" height="200"></canvas>

<!-- Risky: CSS stretches a default 300x150 bitmap to 600x300, blurring it -->
<canvas style="width: 600px; height: 300px;"></canvas>

Pour un rendu net sur les écrans haute densité (« Retina »), mettez le tampon à l'échelle avec window.devicePixelRatio (par ex. définissez les attributs à cssWidth * devicePixelRatio) puis appelez ctx.scale(dpr, dpr) avant de dessiner.

Syntaxe

La balise <canvas> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<canvas>) et fermante (</canvas>).

Exemple de la balise HTML <canvas> :

Le script ci-dessous récupère l'élément avec document.getElementById() et appelle getContext('2d') pour obtenir le contexte de dessin 2D — l'objet qui contient toutes les méthodes et propriétés de dessin. Définir fillStyle choisit la couleur de remplissage, et fillRect(x, y, width, height) peint un rectangle rempli dont le coin supérieur gauche est à (x, y). Les coordonnées du canvas démarrent à (0, 0) dans le coin supérieur gauche, avec x croissant vers la droite et y croissant vers le bas.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head> 
  <body>
    <canvas id="canvasExample">Your browser doesn’t support the HTML5 canvas element.</canvas>
    <script>
      const c = document.getElementById('canvasExample');
      const ctx = c.getContext('2d');
      ctx.fillStyle = '#1c87c9';
      ctx.fillRect(10, 50, 80, 80);
    </script>
  </body>
</html>

Résultat

Exemple de la balise HTML <canvas> utilisée pour du texte :

Pour dessiner du texte, vous définissez la propriété font (même syntaxe que le raccourci CSS font) et fillStyle pour la couleur, puis vous appelez fillText(text, x, y). Ici, (x, y) représente la position de la ligne de base du texte, pas son coin supérieur gauche. Notez que width et height sont définis comme attributs de l'élément afin que le tampon de dessin corresponde à la zone dans laquelle nous dessinons.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
  </head> 
  <body>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      const canvas = document.getElementById('canvasExample');
      const context = canvas.getContext('2d');
      context.font = '30pt Calibri';
      context.fillStyle = '#1c87c9';
      context.fillText('Canvas Example !', 50, 100);
    </script>
  </body>
</html>

Exemple de la balise HTML <canvas> utilisée pour dessiner une ligne :

Les lignes et autres tracés sont dessinés en trois étapes. moveTo(x, y) lève le « crayon » et le place à un point de départ sans dessiner. lineTo(x, y) ajoute un segment droit depuis le point actuel jusqu'au nouveau point — mais rien n'est encore peint. Seul stroke() rend effectivement le tracé, en utilisant le strokeStyle actuel (la couleur du contour). Lorsque vous dessinez plusieurs tracés séparés, commencez chacun par beginPath() ; sinon les nouveaux segments s'ajoutent au tracé précédent. Utilisez fill() (avec fillStyle) à la place de stroke() lorsque vous souhaitez remplir un tracé plutôt que le contourner.

<!DOCTYPE html>
<html>
  <body>
    <canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      const c = document.getElementById("canvasExample");
      const ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(300, 150);
      ctx.strokeStyle = '#1c87c9';
      ctx.stroke();
    </script>
  </body>
</html>

Cas d'utilisation courants

Au-delà des formes simples, le contexte 2D vous permet de créer des graphiques riches :

• Animation — effacez le canvas et redessinez à l'intérieur d'une boucle requestAnimationFrame() pour produire un mouvement fluide image par image.
• Images — ctx.drawImage(img, x, y) peint une balise <img>, un autre canvas ou une image vidéo, ce qui constitue la base de l'édition photo et des filtres.
• Dégradés — createLinearGradient() et createRadialGradient() produisent des remplissages et contours en dégradé.
• Jeux et visualisation de données — canvas est le choix privilégié lorsque vous devez repeindre de nombreux objets à chaque image, c'est pourquoi les bibliothèques de graphiques et de jeux sont construites dessus.

Tout cela repose sur JavaScript, donc une bonne maîtrise du HTML DOM vous aidera à tirer le meilleur parti de canvas.

Accessibilité

Le contenu d'un canvas n'est que des pixels — les lecteurs d'écran et autres technologies d'assistance ne peuvent pas « voir » ce que vous avez dessiné. Rendez le contenu canvas accessible :

• Fournissez un contenu de remplacement significatif entre les balises. Tout ce qui se trouve dans <canvas>...</canvas> est affiché aux navigateurs sans support canvas et exposé aux technologies d'assistance, alors décrivez le dessin plutôt que d'écrire un message générique « non pris en charge ».
• Pour un dessin statique, ajoutez role="img" et un aria-label (ou aria-labelledby) le décrivant, par ex. <canvas role="img" aria-label="Bar chart of 2024 sales">.
• Pour les canvas interactifs, reproduisez les contrôles et l'état dans de vrais éléments DOM (boutons, régions dynamiques) car les formes dessinées elles-mêmes ne sont ni focalisables ni lisibles.

Attributs

La balise <canvas> prend en charge les attributs globaux et les attributs d'événements.

Exercices pratiques