Méthode : CanvasRenderingContext2D.fill()

Remplit la forme définie par le chemin actuel dans le contexte du canvas

Syntaxe
myContext.fill()

Compatible tous navigateurs

Oui

Description
Remplit la forme définie par le chemin actuel dans le contexte du canvas avec les propriétés de style du contexte.

Exemple 1 : Remplissage d'une forme aléatoire

Code source

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

myContext.beginPath();
myContext.moveTo(10,10);
for (var i=1; i<=4; i++) {
var x=parseInt(300*Math.random());
var y=parseInt(150*Math.random());
console.log("Point : "+x+" , "+y);
myContext.lineTo(x, y);
}
myContext.fill();

</script>

Résultat

Emulation de la console

Explication

Crée une forme aléatoire et la remplit avec fill().

Exemple 2 : Exemple de remplissages d'arc de cercles

Code source

<canvas id="myCanvas2" width="350" height="200"></canvas>
<script type="text/javascript">
var myCanvas2=document.getElementById("myCanvas2");
var myContext=myCanvas2.getContext("2d");

/* Remplissage d'un arc de cercle */
myContext.arc(65, 75, 60, 0, 5*Math.PI/4);
myContext.fill();

/* Remplissage d'un arc de cercle en repassant par le centre */
myContext.beginPath();
myContext.arc(200, 75, 60, 0, 5*Math.PI/4);
myContext.lineTo(200,75);
myContext.fill();
myContext.stroke();
</script>

Résultat

Emulation de la console

Explication

Comparaison de remplissages d'arc de cercle direct ou en repassant par le centre.

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 21/09/2017