Dessiner avec Javascript et la balise canvas

Auteur: Mohamed CHINY Durée necessaire pour le cours de Dessiner avec Javascript et la balise canvas Niveau recommandé pour le cours de Dessiner avec Javascript et la balise canvas Supports vidéo non disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 1: La balise canvas

Toutes les pages

Dessiner avec Javascript et la balise canvas

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 spéctaculaire. 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, graphes... 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 repose sur l'API Canvas et qui 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:
<canvas width="300" height="150" id="moncanvas"></canvas>
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.
On peut spécifier les dimensions du canvas en CSS, mais les dessins ne seront pas à l'échelle et auront l'air d'être étirés. Il est donc préférable de les renseigner sous forme d'attributs HTML comme dans l'exemple précédent.
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:
<canvas width="300" height="150" id="moncanvas">
   <img src="image_statique_pour_les_anciens_navigateurs.jpg" />
</canvas>