<canvas>

La balise <canvas> est utilisée pour dessiner des graphiques, des animations ou d'autres contenus visuels dynamiques à l'aide de JavaScript.

Structure et syntaxe de la balise <canvas>

Structure et syntaxe de base

Voici la syntaxe de base d'une balise <canvas> :

<canvas id="monCanvas" width="500" height="300">
  Votre navigateur ne supporte pas cette balise.
</canvas>

Dans cet exemple, le contenu entre les balises <canvas> est affiché uniquement si le navigateur ne supporte pas cette balise.

Exemple d'utilisation

Comme un exemple est plus parlant, voici un exemple d'utilisation avec JavaScript :

<canvas id="monCanvas" width="500" height="300">
  Votre navigateur ne supporte pas la balise <canvas>.
</canvas>

<script>
  const canvas = document.getElementById('monCanvas');
  const context = canvas.getContext('2d');
  context.fillStyle = 'blue';
  context.fillRect(50, 50, 200, 100); // Dessine un rectangle bleu
</script>

Dans cet exemple, la balise <canvas> crée une zone pour dessiner, qui fait 500 pixels de large et 300 pixels de haut.

Le texte id="monCanvas" donne un nom à cette zone pour qu'on puisse la retrouver avec du JavaScript. Si le navigateur ne comprend pas <canvas>, un texte alternatif s'affiche à la place.

Avec JavaScript, on retrouve la zone grâce à document.getElementById et on active le mode de dessin 2D avec getContext('2d').

Ensuite, on choisit la couleur bleue avec fillStyle, puis on dessine un rectangle avec fillRect(50, 50, 200, 100). qui place un rectangle bleu avec :

• 200 pixels de largeur ;
• 100 pixels de hauteur ;
• à 50 pixels du haut et du bord gauche.

À la fin, on voit un rectangle bleu dans la zone de dessine.

Attributs

La balise <canvas> accepte les attributs suivants :

• width : définit la largeur du canevas en pixels.
• height : définit la hauteur du canevas en pixels.

Bonnes pratiques

Utilisez toujours un identifiant unique avec la balise <canvas> afin de pouvoir y accéder facilement avec JavaScript.

Privilégiez la définition des dimensions du canevas directement via les attributs width et height, plutôt que dans le style CSS afin d'avoir une meilleure précision dans les dessins que vous ajouterez.

Enfin, ajoutez toujours un contenu alternatif entre les balises <canvas> pour les utilisateurs dont les navigateurs ne supportent pas cette fonctionnalité. 😉

Différence avec d'autres balises similaires

La balise <canvas> est souvent comparée avec <svg>, une autre balise qui peut sembler avoir les mêmes fonctionnalités... mais bien au contraire !

Contrairement à <canvas>, la balise <svg> est utilisée pour dessiner des graphiques vectoriels qui restent éditables après leur création.

Compatibilité des navigateurs

La balise <canvas> est prise en charge par tous les navigateurs modernes.