L'élément <canvas> permet de modifier une zone graphique via un script (habituellement en JavaScript). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations.

Pour plus d'information sur l'élément <canvas>, voir la page sur canvas.

Catégories de contenu Contenu de flux, contenu phrasé, contenu intégré, contenu tangible.
Contenu autorisé Transparent mais sans aucun descendant étant du contenu interactif à l'exception des éléments <a>, <button>, <input> dont l'attribut type vaut checkbox, radio, ou button.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout contenu acceptant du contenu phrasé.
Rôles ARIA autorisés Tous les rôles sont autorisés
Interface DOM HTMLCanvasElement

Attributs

Comme les autres éléments HTML, cet élément possède les attributs globaux.

height
La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.
moz-opaque
Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées.
width
La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.

Notes d'utilisation

Contenu alternatif

Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <canvas>. Ce contenu pourra être utilisé par les navigateurs plus anciens qui ne supportent pas l'élément <canvas> et ceux pour lesquels JavaScript est désactivé.

Balise </canvas> obligatoire

À la différence de <img>, l'élément <canvas> doit être fermé avec la balise fermante </canvas>.

Dimensionnement du canevas

On peut modifier la taille affichée du canevas grâce à une feuille de style. L'image est mise à l'échelle lors du rendu pour correspondre à la taille indiquée par le style. Si le rendu de l'image semble distordu, on pourra tenter de définir les attributs width et height explicitement pour l'élément et éviter d'utiliser CSS.

Exemples

HTML

<canvas id="canvas" width="300" height="300">
  Désolé, votre navigateur ne prend pas en charge &lt;canvas&gt;.
</canvas>

Résultat

Si on utilise un canevas qui n'a pas besoin de gérer la transparence, on pourra utiliser l'attribut moz-opaque dans la balise de l'élément. Cette information sera utilisée par le moteur de rendu pour effectuer des optimisations. Cependant, cet attribut n'a pas été standardisé et ne fonctionne qu'avec les moteurs de rendus Mozilla.

<canvas id="moncanvas" moz-opaque></canvas>

Spécifications

Spécification État Commentaires
WHATWG HTML Living Standard
La définition de '<canvas>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<canvas>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1.0

1.5 (1.8)[1]
6.0 (6.0)[2]
12.0 (12.0)[3]

(Oui) 9.0 9.0[4] 2.0[5]
moz-opaque Pas de support 3.5 (1.9.1) Pas de support Pas de support Pas de support Pas de support
Fonctionnalité Firefox Mobile (Gecko) Android Edge IE Mobile Opera Mobile Safari Mobile
Support simple 1.0 (1.8)[1]
6.0 (6.0)[2]
12.0 (12.0)[3]
? (Oui) ? ? 1.0
moz-opaque 1.0 (1.9.1) Pas de support Pas de support Pas de support Pas de support Pas de support

[1] Avant Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), la hauteur et la largeur du canvas étaient des entiers signés au lieu d'être des entiers non-signés.

[2] Avant Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), un élément <canvas> avec une largeur ou une hauteur nulle était affiché avec les dimensions par défaut.

[3] Avant Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), si JavaScript était désactivé, l'élément <canvas> était affiché au lieu de montrer le contenu alternatif à utiliser (ce qui est voulu dans la spécification). Désormais, quand JavaScript est désactivé, c'est le contenu de recours (fallback) qui est utilisé.

[4] Bien que pour les premières versions de Safari, la balise fermante n'était pas obligatoire, la spécification indique que la balise fermante est obligatoire. Aussi, pour une meilleure compatibilité, on préfèrera ajouter la balise fermante.

[5] Les versions de Safari antérieures à la version 2.0 afficheront le contenu alternatif en plus du contenu de canvas (sauf à utiliser des feuilles de style pour le masquer). Heureusement, la population utilisant ces versions devient de plus en plus rare.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, marie-ototoi, emersion, tregagnon, lumiru, Shahor, xaky
 Dernière mise à jour par : SphinxKnight,