CanvasRenderingContext2D.stroke() — Methode · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.prototype.stroke(path?)

Beschreibung

stroke() ist der zweite Schritt beim Zeichnen von Pfaden im Canvas: Zuerst beschreibst du die Form mit Methoden wie beginPath(), moveTo(), lineTo(), arc() oder rect(). Erst der Aufruf von stroke() macht den Umriss dann tatsächlich sichtbar. Das Gegenstück zum Füllen der Fläche ist fill().

Wie die Linie aussieht, bestimmen die aktuellen Zustandseigenschaften des Kontexts: strokeStyle (Farbe, Verlauf oder Muster), lineWidth, lineCap, lineJoin, miterLimit, setLineDash() bzw. lineDashOffset sowie die Transformationsmatrix, Schatten, globalAlpha und globalCompositeOperation.

Ohne Argument wird der aktuelle Pfad des Kontexts nachgezeichnet. Übergibst du ein Path2D-Objekt, wird stattdessen dieser Pfad gezeichnet. Der aktuelle Pfad bleibt dabei unverändert. Mit Path2D kannst du Formen einmal definieren und oft wiederverwenden, z. B. auch als SVG-Pfadstring.

Wichtig: stroke() leert den Pfad nicht. Wer danach neue Formen zeichnen will, muss vorher beginPath() aufrufen. Sonst werden alle bisherigen Teilpfade beim nächsten stroke() erneut gezeichnet.

Parameter

Name	Typ	Default	Beschreibung
$path	Path2D	aktueller Pfad des Kontexts	Optionales `Path2D`-Objekt, das nachgezeichnet werden soll. Fehlt es, wird der aktuelle Pfad verwendet.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Das Ergebnis erscheint direkt auf der Zeichenfläche.

Beispiele

Dreieck mit dem aktuellen Pfad umranden

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

ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(150, 30);
ctx.lineTo(250, 150);
ctx.closePath(); // schließt die Linie zurück zum Startpunkt

ctx.strokeStyle = '#1e40af';
ctx.lineWidth = 4;
ctx.lineJoin = 'round';
ctx.stroke();

Wiederverwendbare Form mit Path2D (auch SVG-Syntax)

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

// Herz-Form als SVG-Pfadstring
const heart = new Path2D('M 60 30 A 20 20 0 0 1 100 30 A 20 20 0 0 1 140 30 Q 140 70 100 100 Q 60 70 60 30 Z');

ctx.strokeStyle = 'crimson';
ctx.lineWidth = 3;

// Dieselbe Form mehrfach an verschiedenen Positionen zeichnen
for (let i = 0; i < 3; i++) {
  ctx.save();
  ctx.translate(i * 120, 0);
  ctx.stroke(heart);
  ctx.restore();
}

Fallstrick: beginPath() vergessen

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

const farben = ['red', 'green', 'blue'];

farben.forEach((farbe, i) => {
  ctx.beginPath(); // ohne diese Zeile würden alle Linien zuletzt blau gezeichnet
  ctx.moveTo(20, 30 + i * 30);
  ctx.lineTo(280, 30 + i * 30);
  ctx.strokeStyle = farbe;
  ctx.stroke();
});

Gestrichelte Linie mit Kontur und Füllung kombinieren

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

ctx.beginPath();
ctx.arc(150, 100, 60, 0, Math.PI * 2);

ctx.fillStyle = '#fde68a';
ctx.fill();              // erst füllen ...

ctx.setLineDash([10, 6]);
ctx.lineWidth = 3;
ctx.strokeStyle = '#b45309';
ctx.stroke();            // ... dann umranden, damit die Linie vollständig sichtbar bleibt
ctx.setLineDash([]);     // Strichmuster zurücksetzen

// Wichtig · Fallstricke

Pfad wird nicht geleert: Nach stroke() bleibt der aktuelle Pfad bestehen. Rufe vor jeder neuen Form beginPath() auf. Andernfalls wird alles erneut gezeichnet, was die Darstellung (z. B. Kantenglättung) und die Leistung verschlechtert.
Unscharfe 1-px-Linien: Die Linie liegt zentriert auf dem Pfad. Eine 1 px breite Linie auf ganzzahligen Koordinaten verteilt sich deshalb auf zwei Pixel und wirkt verwaschen. Abhilfe: Koordinaten um 0,5 verschieben, z. B. moveTo(10.5, 0).
Halbe Linienbreite außerhalb: Weil die Linie zentriert ist, ragt sie um lineWidth / 2 über die Form hinaus. Wird danach fill() aufgerufen, deckt die Füllung die innere Hälfte der Linie ab. Deshalb besser zuerst füllen und dann umranden.
Transformation: Die Linienbreite wird mit der aktuellen Transformation mitskaliert. Bei scale(2, 1) ist die Linie also verzerrt. Wirksam ist die Transformation zum Zeitpunkt von stroke(), nicht die beim Aufbau des Pfads.
Kompatibilität: stroke() ohne Argument funktioniert in allen Browsern. Der Path2D-Parameter wird von allen modernen Browsern unterstützt, nicht aber vom Internet Explorer. In Workern ist die Methode über OffscreenCanvasRenderingContext2D verfügbar.
Für einfache Rechtecke ist strokeRect() kürzer. Die Methode verändert den aktuellen Pfad nicht.

Siehe auch

CanvasRenderingContext2D.fill() CanvasRenderingContext2D.beginPath() CanvasRenderingContext2D.strokeStyle CanvasRenderingContext2D.lineWidth CanvasRenderingContext2D.strokeRect() CanvasRenderingContext2D.setLineDash() CanvasRenderingContext2D