Balise HTML <canvas>
Exemple
Dessinez un rectangle rouge à la volée et affichez-le à l'intérieur de l'élément <canvas> :
<canvas id="myCanvas">
Votre navigateur ne prend pas en charge la balise canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Try it Yourself »
Plus d'exemples "Try it Yourself" (« Essayez-le vous-même ») ci-dessous.
Définition et utilisation
La balise <canvas> est utilisée pour dessiner des graphiques, à la volée, via des scripts (généralement JavaScript).
La balise <canvas> est transparente et n'est qu'un conteneur pour les graphiques, vous devez utiliser un script pour dessiner réellement les graphiques.
Tout texte à l'intérieur de l'élément <canvas> sera affiché dans les navigateurs avec JavaScript désactivé et dans les navigateurs qui ne prennent pas en charge <canvas>.
Conseils et remarques
Astuce : Apprenez-en plus sur l'élément <canvas> dans notre Tutoriel HTML Canvas.
Astuce : Pour une référence complète de toutes les propriétés et méthodes, veuillez visiter notre Référence HTML Canvas.
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément.
| Élément | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| height | pixels | Spécifiez la hauteur de la toile. La valeur par défaut est 150 |
| width | pixels | Spécifiez la largeur du canevas. La valeur par défaut est 300 |
Attributs globaux
La balise <canvas> prend également en charge les Attributs globaux en HTML.
Attributs d'événement
La balise <canvas> supporte également les Attributs d'événement en HTML.
Plus d'exemples
Exemple
Un autre exemple de <canvas> :
<canvas id="myCanvas">
Votre navigateur ne prend pas en charge la balise canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
Try it Yourself »
Paramètres CSS par défaut
La plupart des navigateurs affichent l'élément <canvas> avec les valeurs par défaut suivantes :
