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

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 Non 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 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

Vous devez fournir un contenu alternatif à l'intérieur du bloc <canvas>. Ce contenu sera affiché à la fois par les navigateurs plus anciens qui ne prennent pas en charge cet élément et par les navigateurs où 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 : 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 explicites width et height de l'élément en HTML (ou via du code JavaScript).

Taille maximale d'un canevas

La taille maximale exacte d'un élément <canvas> dépend du navigateur et de l'environnement. Dans la plupart des cas, les dimensions maximales dépassent 10 000 × 10 000 pixels, mais certains appareils — notamment iOS — limitent la taille du canevas à 4 096 × 4 096 pixels. Voir limitations de taille du canevas selon les navigateurs et les appareils ^(angl.).

Accessibilité

Contenu alternatif

L'élément <canvas> pris isolément n'est qu'une image matricielle et ne fournit aucune information sur les objets dessinés. Le contenu d'un canevas n'est pas exposé aux outils d'accessibilité comme le serait du HTML sémantique. De façon générale, évitez d'utiliser <canvas> pour produire un site ou une application accessibles. Les guides suivants peuvent aider à en améliorer l'accessibilité.

• Cas d'utilisation pour l'accessibilité de <canvas> ^(angl.)
• Problèmes d'accessibilité de l'élément <canvas> ^(angl.)
• L'accessibilité de l'élément <canvas> dans Firefox 13 — Steve Faulkner ^(angl.)
• Bonnes pratiques pour concevoir des éléments <canvas> interactifs ^(angl.)

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 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éthode HTMLCanvasElement.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";
// Ajoute un rectangle en (10, 10) de taille 100×100 pixels
ctx.fillRect(10, 10, 100, 100);

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API Canvas
• Tutoriel Canvas
• L'API OffscreenCanvas
• Anti‑sèche Canvas ^(angl.) (2009)
• Anti‑sèche Canvas (pdf) ^(angl.) (2015)
• Guide Safari HTML Canvas ^(angl.) sur Apple (2013)
• CanvasRenderingContext2D — contexte de dessin 2D pour un élément <canvas> ^(angl.) sur Apple.com
• L'API WebGL
• L'élément HTML <img>
• SVG
• Vidéo et audio HTML