L'élément <canvas> permet de modifier une zone graphique via un script (habituellement en JavaScript ou grâce à WebGL). 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. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard canvas.getContext('2d', { alpha: false }) à la place.
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

Le fragment de code suivant ajoute un élément canvas au document. Un texte alternatif est fourni au cas où le navigateur ne peut pas afficher ce canevas. Un texte alternatif ou bien des éléments internes permettront de rendre le canevas plus accessible.

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

JavaScript

On utilise également ce fragment de code JavaScript avec la méthode HTMLCanvasElement.getContext() afin d'obtenir le contexte de dessin puis on dessine sur le canevas.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

Gérer l'opacité

Si le canevas n'utilise pas la transparence, on pourra indiquer au navigateur que le canevas est opaque afin d'optimiser le rendu. Pour cela, on pourra utiliser la propriété alpha avec la valeur false.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d', {alpha: false});

Avant que cette option soit standard, on pouvait utiliser l'attribut HTML moz-opaque pour les navigateurs basés sur Gecko. Toutefois, ce n'est pas une solution standard, cf. le bug bug 878155 pour suivre le retrait de cet attribut.

Résultat

Spécifications

Spécification État Commentaires
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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5
Notes
Support complet 1.5
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
IE Support complet 9Opera Support complet 9Safari Support complet 2
Notes
Support complet 2
Notes
Notes Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Versions of Safari prior to version 2 will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
Opera Android Aucun support NonSafari iOS Support complet 1Samsung Internet Android ?
heightChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5
Notes
Support complet 1.5
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
IE Support complet 9Opera Support complet 9Safari Support complet 2
Notes
Support complet 2
Notes
Notes Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Versions of Safari prior to version 2 will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
Opera Android Aucun support NonSafari iOS Support complet 1Samsung Internet Android ?
moz-opaque
Non-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 3.5IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 4Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
widthChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5
Notes
Support complet 1.5
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
IE Support complet 9Opera Support complet 9Safari Support complet 2
Notes
Support complet 2
Notes
Notes Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Versions of Safari prior to version 2 will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
Opera Android Aucun support NonSafari iOS Support complet 1Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

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,