<canvas> : l'élément de canevas graphique

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

On utilise l'élémentHTML<canvas> avec l'APIcanvas, ou l'APIWebGL pour dessiner des graphiques et des animations.

Catégories de contenu	Contenu de flux,contenu phrasé,contenu intégré,contenu tangible.
Contenu autorisé	Transparent mais sans aucun descendant étant ducontenu 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 ducontenu phrasé.
Rôle ARIA implicite	Pas de rôle correspondant
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 lesattributs globaux.

height: La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.
moz-opaqueNon standard Obsolète: 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 standardcanvas.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.

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é. Fournir un texte de repli ou un sous-DOM utile aide àrendre le canevas plus accessible.

Balise`</canvas>` obligatoire

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

Dimensionnement du canevas : CSS ou HTML

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. Toutefois, cela pourra distordre l'image lors du rendu final.

Mieux vaut utiliser les attributs expliciteswidth etheight de l'élément en HTML (ou via du code JavaScript).

Taille maximale d'un canevas

La taille maximale d'un élément<canvas> dépend du navigateur utilisé. Voici un tableau de mesures provenant de tests et diverses sources (ex.Stack Overflow):

Navigateur	Hauteur maximale	Largeur maximale	Aire maximale
Chrome	32 767 pixels	32 767 pixels	268 435 456 pixels (soit 16 384 x 16 384)
Firefox	32 767 pixels	32 767 pixels	472 907 776 pixels (soit 22 528 x 20 992)
Safari	32 767 pixels	32 767 pixels	268 435 456 pixels (soit 16 384 x 16 384)
IE	8 192 pixels	8 192 pixels	?

Note :Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.

Exemples

HTML

Le fragment de code suivant ajoute un élémentcanvas 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.

html

<canvas width="300" height="100">  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éthodeHTMLCanvasElement.getContext() afin d'obtenir le contexte de dessin puis on dessine sur le canevas.

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

Résultat

Accessibilité

Contenu alternatif

Seul, l'élément<canvas> est une image matricielle et ne fournit pas d'informations sur les objets dessinés. Le contenu d'un canevas n'est pas accessible aux outils d'assistance qui se basent sur le contenu sémantique du document HTML. De façon générale, on évitera de se servir uniquement de<canvas> pour produire un document accessible. Voici quelques pages et articles pour aider à l'accessibilité avec les canevas :