CanvasRenderingContext2D.fill() — Methode · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.prototype.fill(path?, fillRule?)

Beschreibung

Die Methode fill() der Canvas-2D-API malt das Innere eines Pfads aus. Die Farbe, den Verlauf oder das Muster legt vorher die Eigenschaft fillStyle fest. Ohne Argumente wird der aktuelle Pfad gefüllt, also alles, was seit dem letzten beginPath() mit moveTo(), lineTo(), arc(), rect() usw. angelegt wurde.

Offene Teilpfade werden beim Füllen automatisch geschlossen, als würde von ihrem letzten Punkt eine gerade Linie zum Startpunkt führen. Ein closePath() brauchst du fürs Füllen also nicht, für eine saubere Kontur mit stroke() dagegen schon.

Mit der Füllregel legst du fest, welche Bereiche als „innen“ zählen. Das ist bei sich selbst schneidenden oder verschachtelten Pfaden wichtig:

"nonzero" (Standard): Für einen Punkt wird gezählt, wie oft der Pfad ihn umläuft, und zwar mit Vorzeichen je nach Richtung. Ist die Summe nicht null, liegt der Punkt innen. Ein Loch entsteht nur, wenn der innere Pfad in die Gegenrichtung läuft.
"evenodd": Ein Punkt liegt innen, wenn ein Strahl von ihm aus den Pfad ungerade oft schneidet. So entstehen Löcher (z. B. Ringe) unabhängig von der Zeichenrichtung.

Alternativ übergibst du ein Path2D-Objekt. Dann wird dieser Pfad gefüllt und der aktuelle Pfad des Kontexts bleibt unverändert. Das ist praktisch für Formen, die du wiederverwendest oder aus SVG-Pfaddaten erzeugst.

Parameter

Name	Typ	Default	Beschreibung
$path	Path2D		Optionaler Pfad, der statt des aktuellen Pfads gefüllt wird. Ohne Angabe nutzt die Methode den aktuellen Pfad des Kontexts.
$fillRule	"nonzero" \| "evenodd"	"nonzero"	Legt fest, ob ein Punkt innerhalb des Pfads liegt. Kann als einziges Argument oder als zweites Argument nach `path` übergeben werden.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Die Methode zeichnet direkt auf die Canvas.

Beispiele

Dreieck mit dem aktuellen Pfad füllen

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.lineTo(90, 100);
ctx.lineTo(10, 100);
// kein closePath() nötig – fill() schließt den Pfad automatisch
ctx.fillStyle = 'tomato';
ctx.fill();

Ring (Donut) mit der Regel "evenodd"

const ctx = document.querySelector('canvas').getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2); // äußerer Kreis
ctx.moveTo(140, 100);                   // Verbindungslinie vermeiden
ctx.arc(100, 100, 40, 0, Math.PI * 2); // innerer Kreis, gleiche Richtung

ctx.fillStyle = '#2a9d8f';
ctx.fill('evenodd'); // der innere Kreis wird zum Loch
// mit ctx.fill() (nonzero) wäre die Scheibe komplett gefüllt

Wiederverwendbare Form mit Path2D und SVG-Pfaddaten

const ctx = document.querySelector('canvas').getContext('2d');

// Herzform als SVG-Pfad
const heart = new Path2D('M 50 30 C 50 0, 0 0, 0 30 C 0 60, 50 80, 50 100 C 50 80, 100 60, 100 30 C 100 0, 50 0, 50 30 Z');

const colors = ['crimson', 'orchid', 'gold'];
colors.forEach((color, i) => {
  ctx.save();
  ctx.translate(i * 120 + 10, 10);
  ctx.fillStyle = color;
  ctx.fill(heart); // der aktuelle Pfad des Kontexts bleibt unberührt
  ctx.restore();
});

Füllen und Kontur mit einem Verlauf kombinieren

const ctx = document.querySelector('canvas').getContext('2d');

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '#264653');
gradient.addColorStop(1, '#e76f51');

ctx.beginPath();
ctx.roundRect(20, 20, 200, 100, 16);
ctx.fillStyle = gradient;
ctx.fill();

ctx.lineWidth = 4;
ctx.strokeStyle = 'black';
ctx.stroke(); // derselbe Pfad, jetzt als Kontur

// Wichtig · Fallstricke

beginPath() nicht vergessen: Ohne neuen beginPath() hängt jeder weitere Befehl an den alten Pfad an. Ein folgendes fill() füllt dann alle bisherigen Formen noch einmal, meist in der neuen Farbe. Das ist ein häufiger Fehler und bei vielen Formen auch ein Performance-Problem.
Reihenfolge mit stroke(): Wenn du zuerst fill() und danach stroke() aufrufst, bleibt die Kontur vollständig sichtbar. Umgekehrt verdeckt die Füllung die innere Hälfte der Linie.
Transformationen: Der aktuelle Pfad wird beim Anlegen mit der jeweils gültigen Transformation festgelegt. Ein Path2D wird dagegen mit der Transformation gefüllt, die beim Aufruf von fill(path) gilt.
Ungültige Werte für fillRule lösen einen TypeError aus.
fill() berücksichtigt auch globalAlpha, globalCompositeOperation, Schatten (shadowBlur usw.) und filter.
Kompatibilität: fill() und fillRule funktionieren in allen modernen Browsern. Die Path2D-Überladung gibt es ebenfalls überall, im Internet Explorer fehlt sie. fill() ist auch in OffscreenCanvasRenderingContext2D (Web Worker) verfügbar.

Siehe auch

CanvasRenderingContext2D.arc() CanvasRenderingContext2D.clip() CanvasRenderingContext2D.fillRect() CanvasRenderingContext2D.fillText() CanvasRenderingContext2D.rect()