Utiliser l'élément canvas

La balise canvas c'est quoi?

Dans le cours de HTML5 nous avons vu que plusieurs balises ont été introduites, principalement les balises sémantiques (comme <header>, <footer>, <nav>...), les balises d'intégration de contenu multimédia et de nouveaux champs de formulaires. Cependant il existe une balise très particulière et qui peut jouer un rôle tout aussi capital. Il s'agit de la balise <canvas>.

La balise <canvas> sert à créer des dessins dynamiquement sur le navigateur. Ces dessins peuvent se traduire en images, illustrations, représentations graphiques... et ils peuvent même être animés et donner vie à des applications spéciales comme des jeux.

Bien entendu, pour dessiner sur les canvas il faut faire appel au langage Javascript qui dispose de l'API Canvas. Cette dernière renferme une panoplie de méthodes qui permettent de dessiner des formes de base comme les lignes, les rectangles, les cercles..., écrire des texte et importer des images existantes.

Déclarer la balise canvas

La balise <canvas> se déclare simplement comme ceci:
Le canvas représente l'espace de travail sur lequel on va dessiner. Il doit donc avoir une largeur et une hauteur et c'est justement le rôle des attributs width et height. Si les dimensions du canvas ne sont pas spécifiés alors celui-ci aura respectivement les largeur et hauteur par défaut de 300px et 150px.

L'attribut id sert simplement à identifier le canvas afin de pouvoir y accéder via le DOM en Javascript. Cependant, on peut toujours se passer de l'identifiant et sélectionner l'élément en utilisant d'autres méthodes vues précédemment en Javascript.
En gros, la balise <canvas> est vue par le navigateur comme une image transparente. On peut donc lui appliquer autant de styles que l'on veut afin de changer son apparence. Or, les anciens navigateurs ne la supportent pas et n'afficheront donc rien car ils vont tout simplement ignorer la balise. Pour prévenir ce comportement, on peut placer un texte (ou une image statique) au milieu de la balise. Si la navigateur ne supporte pas l'élément alors il affichera le contenu qui y est inclus. Sinon, il affichera les dessins sur canevas et non le contenu inclus.

Exemple: