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:
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:

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:

Spécifications

Specification Status Comment
HTML Living Standard
La définition de 'CanvasRenderingContext2D.fill' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi