Dessin sur toile HTML
Dessiner sur le canevas avec JavaScript
Tout dessin sur le canevas HTML doit être fait avec JavaScript :
Exemple
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Étape 1 : Trouver l'élément Canvas
Tout d'abord, vous devez trouver l'élément <canvas>.
Ceci est fait en utilisant la méthode HTML DOM getElementById() :
var canvas = document.getElementById("myCanvas");
Étape 2 : créer un objet de dessin
Deuxièmement, vous avez besoin d'un objet de dessin pour le canevas.
Le getContext() est un objet HTML intégré, avec des propriétés et des méthodes pour dessiner :
var ctx = canvas.getContext("2d");
Étape 3 : Dessinez sur la toile
Enfin, vous pouvez dessiner sur la toile.
Définissez le style de remplissage de l'objet dessin sur la couleur rouge :
ctx.fillStyle = "#FF0000";
La propriété fillStyle peut être une couleur CSS, un dégradé ou un motif. Le fillStyle par défaut est noir.
La méthode fillRect( x,y,width,height ) dessine un rectangle, rempli avec le style de remplissage, sur le canevas :
ctx.fillRect(0, 0, 150, 75);