Objet : HTMLCanvasElement

Elément HTML correspondant au canvas et permettant la création graphique par JavaScript

Compatible tous navigateurs

Oui

Description
L'objet HTMLCanvasElement est l'objet correspondant à la balise canvas du document HTML.
HTMLCanvasElement hérite des propriétés et des méthodes de HTMLElement et lui ajoute de nombreuses possibilités permettant le dessin dans le navigateur, en particulier grâce à l'objet de contexte CanvasRenderingContext2D

Méthodes
getContext() Retourne l'objet contexte de dessin de myCanvas
toDataURL() Convertit le contenu du canvas en données texte utilisable dans une image

Exemple 1 : Un exemple basique de dessin dans canvas

Code source

<canvas id="myCanvas">Balise non reconnue</canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
console.log(myCanvas);

var ctx=myCanvas.getContext("2d");

ctx.rect(10, 10, 200, 100);
ctx.stroke();
</script>

Résultat

Emulation de la console

Explication

Crée un canvas et dessine un rectangle dedans.
myCanvas est alimenté par getElementById().
Il est affiché dans la console pour vous montrer les particularités de cet objet.

L'appel à getContext() permet de définir la variable ctx, objet de type CanvasRenderingContext2D qui supporte toutes les méthodes de dessins.

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 29/11/2017

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Objet : HTMLCanvasElement

Elément HTML correspondant au canvas et permettant la création graphique par JavaScript

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...