CanvasRenderingContext2D.fill()

La méthode CanvasRenderingContext2D.fill() de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.

Syntaxe

void ctx.fill([fillRule]);
void ctx.fill(path[, fillRule]);

Paramètres

fillRule

L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin. Valeurs possible:

nonzero

La règle de remplissage extérieur/intérieur non nul, qui est la règle par défaut.

evenodd

La règle de remplissage pair/impair.

path

Un chemin Path2D (en-US) à remplir.

Exemples

Utiliser la méthode fill

Ceci est un simple snippet de code qui utilise la méthode fill pour remplir un chemin.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.fill();

Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:

Code jouable

Utiliser l'option fillRule

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(96.50,50.00);
ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50);
ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00);
ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50);
ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00);
ctx.closePath();

ctx.fillStyle = "lightblue";
ctx.lineWidth = 2;
ctx.fill("nonzero");
ctx.stroke();

Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:

Code jouable 2

Spécifications

Specification
HTML Standard
# dom-context-2d-fill-dev

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi