CanvasRenderingContext2D.closePath() — Methode · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.prototype.closePath()

Beschreibung

closePath() fügt dem aktuellen Pfad eine gerade Linie vom aktuellen Punkt zum Startpunkt des aktuellen Unterpfads hinzu. Ist die Form bereits geschlossen oder enthält der Pfad nur einen Punkt, passiert nichts. Anschließend beginnt an diesem Startpunkt ein neuer Unterpfad.

Der Unterschied zu einem abschließenden lineTo() zum Startpunkt zeigt sich beim Zeichnen der Kontur mit stroke(): Mit closePath() wird die letzte Ecke mit der eingestellten lineJoin-Art verbunden, zum Beispiel miter oder round. Mit lineTo() bleiben dagegen zwei offene Linienenden mit lineCap übrig. Das fällt vor allem bei dicken Linien als unsaubere Ecke auf.

Wichtig: closePath() zeichnet selbst nichts und ist nicht das Gegenstück zu beginPath(). Zum Anzeigen braucht es immer noch stroke() oder fill(). Für fill() ist closePath() nicht nötig, weil offene Unterpfade beim Füllen automatisch geschlossen werden.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Dreieck mit sauber geschlossener Kontur

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

ctx.lineWidth = 12;
ctx.lineJoin = 'miter';
ctx.strokeStyle = '#1e66f5';

ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(150, 30);
ctx.lineTo(250, 150);
ctx.closePath(); // Linie zurück zu (50, 150), die Ecke wird mit lineJoin verbunden
ctx.stroke();

Vergleich: closePath() und lineTo() zum Startpunkt

const ctx = document.querySelector('#leinwand').getContext('2d');
ctx.lineWidth = 16;

// Links: mit lineTo – die Startecke bleibt eingekerbt
ctx.beginPath();
ctx.moveTo(20, 120);
ctx.lineTo(80, 20);
ctx.lineTo(140, 120);
ctx.lineTo(20, 120);
ctx.stroke();

// Rechts: mit closePath – alle Ecken sind sauber verbunden
ctx.beginPath();
ctx.moveTo(180, 120);
ctx.lineTo(240, 20);
ctx.lineTo(300, 120);
ctx.closePath();
ctx.stroke();

Regelmäßiges Vieleck als wiederverwendbare Funktion

const drawPolygon = (ctx, cx, cy, radius, sides) => {
  ctx.beginPath();
  for (let i = 0; i < sides; i++) {
    const angle = (i / sides) * Math.PI * 2 - Math.PI / 2;
    const x = cx + radius * Math.cos(angle);
    const y = cy + radius * Math.sin(angle);
    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
  }
  ctx.closePath();
};

const ctx = document.querySelector('#leinwand').getContext('2d');
drawPolygon(ctx, 150, 100, 70, 6);
ctx.fillStyle = '#a6e3a1';
ctx.fill();
ctx.lineWidth = 4;
ctx.stroke();

// Wichtig · Fallstricke

Häufige Verwechslung: closePath() beendet den Pfad nicht und löscht ihn auch nicht. Wer eine neue Form beginnen will, ohne dass die alten Unterpfade beim nächsten stroke() noch einmal gezeichnet werden, muss beginPath() aufrufen.
Nach closePath() startet ein neuer Unterpfad am Startpunkt des alten. Ein folgendes lineTo() beginnt also dort und nicht am zuletzt gezeichneten Punkt.
Für fill() und clip() ist closePath() überflüssig, weil offene Unterpfade dabei automatisch geschlossen werden. Beim Zeichnen der Kontur ist es aber wichtig.
Die Methode gibt es auch auf Path2D und OffscreenCanvasRenderingContext2D. Sie wird von allen Browsern unterstützt.

Siehe auch

CanvasRenderingContext2D.beginPath() CanvasRenderingContext2D.moveTo() CanvasRenderingContext2D.lineTo() CanvasRenderingContext2D.stroke() CanvasRenderingContext2D.fill() CanvasRenderingContext2D.lineJoin