Retourner à la page d'accueil de TJS

Objet : HTMLCanvasElement

          

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


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 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 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 23/02/2019 10:31:38 sur php7 en 27.46 ms