Signatur
Beschreibung
Die Eigenschaft strokeStyle bestimmt, womit der 2D-Kontext Linien und Umrisse zeichnet – also alles, was über stroke(), strokeRect() oder strokeText() ausgegeben wird. Zugewiesen werden kann ein CSS-Farbwert als Zeichenkette (z. B. "red", "#ff8800", "rgb(0 128 255 / 50%)", "hsl(200 80% 50%)"), ein CanvasGradient oder ein CanvasPattern. Der Standardwert ist "#000000" (Schwarz).
Der Wert gehört zum Zeichenzustand des Kontexts: Er gilt für alle folgenden Strich-Operationen, bis er erneut geändert wird, und lässt sich mit save() und restore() sichern bzw. wiederherstellen. Bereits gezeichnete Linien werden durch eine spätere Änderung nicht beeinflusst – entscheidend ist der Wert zum Zeitpunkt des stroke()-Aufrufs.
Beim Auslesen liefert die Eigenschaft Farben in normalisierter Form zurück: deckende Farben als "#rrggbb", transparente als "rgba(r, g, b, a)". Wurde ein Verlauf oder Muster zugewiesen, erhält man genau dieses Objekt zurück. Ungültige Zeichenketten werden stillschweigend ignoriert – der vorherige Wert bleibt erhalten.
Das Gegenstück für Füllungen ist fillStyle. Die Strichstärke, Linienenden und -verbindungen steuert man separat über lineWidth, lineCap, lineJoin und setLineDash().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value Pflicht | string | CanvasGradient | CanvasPattern | "#000000" | Neuer Strichstil: ein beliebiger gültiger CSS-<color>-Wert als Zeichenkette, ein mit createLinearGradient()/createRadialGradient()/createConicGradient() erzeugter Verlauf oder ein mit createPattern() erzeugtes Muster. |
Rückgabewert
"#rrggbb" bzw. "rgba(r, g, b, a)"), Verläufe und Muster als das zugewiesene Objekt.Beispiele
Rechtecke mit unterschiedlichen Umrissfarben
const canvas = document.querySelector('#leinwand');
const ctx = canvas.getContext('2d');
ctx.lineWidth = 4;
ctx.strokeStyle = 'crimson';
ctx.strokeRect(10, 10, 100, 60);
ctx.strokeStyle = 'rgb(0 128 255 / 50%)';
ctx.strokeRect(130, 10, 100, 60);
// Normalisierte Rückgabe prüfen
console.log(ctx.strokeStyle);Linie mit linearem Farbverlauf
const ctx = document.querySelector('#leinwand').getContext('2d');
const verlauf = ctx.createLinearGradient(20, 0, 280, 0);
verlauf.addColorStop(0, '#ff5f6d');
verlauf.addColorStop(1, '#2193b0');
ctx.strokeStyle = verlauf;
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.lineTo(280, 100);
ctx.stroke();
console.log(ctx.strokeStyle instanceof CanvasGradient);Farbpalette in einer Schleife mit save()/restore()
const ctx = document.querySelector('#leinwand').getContext('2d');
const farben = ['#e63946', '#f4a261', '#2a9d8f', '#264653'];
ctx.lineWidth = 3;
farben.forEach((farbe, i) => {
ctx.save();
ctx.strokeStyle = farbe;
ctx.beginPath();
ctx.arc(50 + i * 60, 60, 25, 0, Math.PI * 2);
ctx.stroke();
ctx.restore();
});
// Nach restore() ist wieder der Standardwert aktiv
console.log(ctx.strokeStyle);Ungültige Werte werden ignoriert
const ctx = document.createElement('canvas').getContext('2d');
ctx.strokeStyle = 'teal';
ctx.strokeStyle = 'keine-farbe'; // ungültig → wird verworfen
console.log(ctx.strokeStyle);// Wichtig · Fallstricke
- Stille Fehler: Ungültige Farbwerte werfen keinen Fehler, sondern werden ignoriert. Bei unerwartet schwarzen Linien zuerst die Farbschreibweise prüfen.
- Kein Vergleich mit der Eingabe: Wegen der Normalisierung liefert
ctx.strokeStyle = 'red'beim Auslesen"#ff0000". Direkte Stringvergleiche mit dem gesetzten Wert schlagen daher oft fehl. - Zeitpunkt zählt: Der Stil wird beim Aufruf von
stroke()ausgewertet. Wer mehrere Linien in einem Pfad sammelt und dazwischen die Farbe ändert, erhält alle Linien in der zuletzt gesetzten Farbe – für unterschiedliche Farben jeweilsbeginPath()undstroke()aufrufen. - Verläufe sind kontextbezogen: Verlaufs-Koordinaten beziehen sich auf das Koordinatensystem zum Zeitpunkt des Zeichnens (inkl.
translate()/scale()), nicht auf die einzelne Form. - CSS-Variablen wie
var(--akzent)werden nicht aufgelöst; den Wert vorher mitgetComputedStyle()auslesen.currentcolorbezieht sich auf das<canvas>-Element. - Kompatibilität: In allen Browsern unterstützt, ebenso in
OffscreenCanvasRenderingContext2D. Moderne Farbsyntax (Leerzeichen-getrenntesrgb(),oklch(),color()) hängt von der CSS-Unterstützung des jeweiligen Browsers ab;createConicGradient()ist erst in neueren Versionen verfügbar.