Utilisation de base des canvas

Commençons par regarder l'élément <canvas> lui-même.

<canvas id="tutoriel" width="150" height="150"></canvas>

Ceci ressemble beaucoup à l'élément <img>. La seule différence est qu'il n'y a pas les attributs src et alt. L'élément <canvas> a seulement deux attributs : width et height (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le DOM. Quand les attributs width et height ne sont pas spécifiés, le canvas sera initialement large de 300 pixels et haut de 150 pixels. Les dimensions du canvas peuvent être modifiés par du CSS, mais l'image sera dessinée selon les valeurs width et height du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.

L'attribut id n'est pas spécifique à l'élément <canvas>. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une id car ça facilite beaucoup l'identification du canvas dans le code javascript.

L'élément <canvas> peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.

Puisque certains plus anciens navigateurs ne supportent pas l'élément <canvas> (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.

Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément <canvas> lui-même. Les navigateurs qui ne supportent pas <canvas> vont afficher ce contenu de repli, et ceux qui supportent <canvas> vont l'ignorer et dessiner le canvas.

Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 + 0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt="une horloge" />
</canvas>

Au contraire de l'élément <img>, l'élément <canvas> requiert la balise fermante (</canvas>).

Si vous n'avez pas besoin de contenu de repli, un simple <canvas id="foo" ...></canvas> est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.

L'élément <canvas> crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs contextes de rendu, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte WebGL, qui utilise un contexte 3D ("experimental-webgl") inspiré de OpenGL ES.

Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément <canvas> a une méthode nommée getContext(), qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. getContext() a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".

var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");

La première ligne obtient le <canvas> dans le DOM en appelant document.getElementById(). Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode getContext().

Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément <canvas>. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode getContext(). Notre extrait de code ci-dessus se transforme donc en ceci :

var canvas = document.getElementById("tutorial");

if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  // code de dessin dans le canvas
} else {
  // code pour le cas où canvas ne serait pas supporté
}

Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw() {
        var canvas = document.getElementById("tutorial");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");
        }
      }
    </script>
    <style type="text/css">
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

Ce script contient une fonction draw(), qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant window.setTimeout(), window.setInterval(), ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.

Voici à quoi le modèle ressemble :

Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="application/javascript">
      function draw() {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");

          ctx.fillStyle = "rgb(200, 0, 0)";
          ctx.fillRect(10, 10, 50, 50);

          ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
          ctx.fillRect(30, 30, 50, 50);
        }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>

Cet exemple ressemble a ceci :

• Précédent
• Suivant