Intoduction à l'élément Canvas


L'élément canvas est une nouveauté de html5. Canvas est un espace de pixels qui peuvent, comme tout autre élément d'une page HTML, être manipulés via javascript, ou php (ou autre…).
On peut réaliser de nombreuses fonctions graphiques, comme dessiner, tracer des courbes, animer ces fonctions et graphiques, créer des jeux vidéos…
L'élément canvas peut jusqu'à un certain point, remplacer la technologie Flash abondamment utilisée par les applications web, les vidéos et les jeux. Flash, racheté par Adobe Systems en 2005, est une suite logiciels propriétaires, et, en tant que tel, il est impossible d'en faire un standard du web (ses spécifications et sa documentation ne sont par exemple pas complètement publiques, alors qu'un standard se doit d'être totalement et publiquement documenté).
Canvas pourrait justement devenir le nouveau standard, remplaçant entre autre Flash.

Un autre avantage de l'élément canvas est qu'il est plus naturellement pris en charge par les mobiles et applications mobiles (notamment pour les iPad et iPhone qui ont mis prématurément de côté Flash, suivi dans cette décission par les autres: android, Opera Mobile, …).

L'élément canvas est actuellement supporté par tous les navigateurs web dans leur version récente.

Canvas s'utilise comme tout élément html, via sa balise, et, comme tout élément html aussi, a un certain nombre d'attributs qu'on peut fournir explicitement ou via le style css:
Code: Select all
<canvas id="canvas0" width="200" height="100">
 Le texte situé ici ne sera affiché que par les navigateurs ne
 reconnaissant pas l'élément canvas.
 Un message d'erreur ou de warning, ou d'invitation à mettre à
 jour son navigateur peut donc être indiqué ici.
</canvas>
Affichage:
Le texte situé ici ne sera affiché que par les navigateurs ne reconnaissant pas l'élément canvas. Un message d'erreur ou de warning, ou d'invitation à mettre à jour son navigateur peut donc être indiqué ici.

ou
Code: Select all
<canvas id="canvas1" style="width:200px;height:100px;border:4px outset blue">
 Texte alternatif/d'erreur
</canvas>
Affichage:
Texte altrenatif/d'erreur
Une fois le canvas défini, ou plus précisément donc la zone de pixels manipulable, les interactions peuvent se faire en javascript: dessins, interactions avec l'utilisateur (mouvement/ click de souris), clavier, webcam, …
Avec getElementById (comme dans le premier exemple ci-dessus), on cible le canvas par son attribut (unique) id, puis la méthode getContext appliqué à l'élément canvas récupéré va permettre de préciser le type de dessin: getContext("2d") pour des représentations en 2D.

Voir aussi: