Dessiner avec Javascript et la balise canvas
Page 1: La balise canvas
Toutes les pages 
Dessiner avec Javascript et la balise canvas
Page 1
La balise canvas
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 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:<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 é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>
<img src="image_statique_pour_les_anciens_navigateurs.jpg" />
</canvas>
API Canvas en vidéo
Introduction à l'API Canvas
Page 1
La balise canvas
La balise canvas
