Le tag <canvas> (ce qui se traduit comme “toile”) crée un domaine sur page web, où on peut créer des objets, des images et des animations, des photo compositions différents à l'aide de scripts de Javascript. Tag a apparu dans la cinquième version de HTML.

En travaillant avec canvas c'est important de différencier des concepts tels qu’un élément canvas et le contexte d’ élément, car ils sont souvent confus. L’élément canvas est ce qui est intégré dans HTML (noeud DOM), et le contexte canvas est un objet avec ses méthodes et particularités de la visualisation. Le context peut être 2D et 3D. L’élément canvas peut avoir un context seulement.

Syntaxe

Le tag <canvas> est apparié, son contenu est écrit entre le tag ouvrant (<canvas>) et le tag fermant (</canvas>).

Exemple

<!DOCTYPE html>
<html>
  <body>
    <canvas id="myCanvas">Votre navigateur ne supporte pas HTML5 élément canvas.</canvas>
    <script>
      var c=document.getElementById('myCanvas');
      var ctx=c.getContext('2d');
      ctx.fillStyle='#ff9311';
      ctx.fillRect(10,50,80,80);
    </script>
  </body>
</html>

Résultat

myCanvas

Exemple

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

Résultat

myCanvas

Attributs

Attribut Valeur Description
height pixels Indique la hauteur d’un élément en pixels. Valeur par défaut - "150".
width pixels Indique la largeur d’un élément en pixels. Valeur par défaut - "300".

Le tag <canvas> supporte les Attributs globaux et les Attributs d'événements.

Support de Navigateurs

chrome firefox safari opera
4+ 2+ 3.1+ 9+

Pratiquez vos connaissances

Quelle est la fonction du tag <canvas> en HTML selon le site www.w3docs.com?
Trouvez-vous cela utile?