Retourner à la page d'accueil de TJS

Objet : HTMLCanvasElement

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


Compatible tous navigateurs

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
Balise non reconnue
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

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 14 novembre 2019

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

Commandez en ligne

Chercher une fonction, un objet, ...

Le 15/07/2020 01:13:07 sur php7 en 26.3 ms