Signatur
Beschreibung
Die Eigenschaft fillStyle des 2D-Kontexts bestimmt die Füllung für alle Zeichenoperationen, die Flächen füllen – etwa fillRect(), fill() und fillText(). Erlaubt sind ein CSS-Farbwert als String (z. B. "red", "#3498db", "rgb(0 0 0 / 50%)"), ein CanvasGradient aus createLinearGradient(), createRadialGradient() oder createConicGradient() sowie ein CanvasPattern aus createPattern().
Der Standardwert ist "#000000" (schwarz). Der Wert gehört zum Zeichenzustand und wird deshalb von save() gespeichert und von restore() wiederhergestellt. Eine Änderung wirkt nur auf nachfolgende Zeichenbefehle, bereits gezeichnete Pixel bleiben unverändert.
Beim Auslesen wird eine Farbe in normalisierter Form zurückgegeben: volldeckende Farben als #rrggbb in Kleinbuchstaben, Farben mit Transparenz als rgba(r, g, b, a). Verläufe und Muster werden als dasselbe Objekt zurückgegeben, das zugewiesen wurde.
Für Umrisslinien gibt es das Gegenstück strokeStyle; beide Eigenschaften sind voneinander unabhängig.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert Pflicht | string | CanvasGradient | CanvasPattern | "#000000" | Ein gültiger CSS-Farbwert, ein CanvasGradient- oder ein CanvasPattern-Objekt. Ungültige Werte werden stillschweigend ignoriert. |
Rückgabewert
#rrggbb oder rgba(...)), sonst das zugewiesene Verlaufs- bzw. Musterobjekt.Beispiele
Einfarbige Rechtecke zeichnen
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 60);
// Halbtransparentes Rot überlagert das blaue Rechteck
ctx.fillStyle = 'rgb(231 76 60 / 60%)';
ctx.fillRect(60, 40, 100, 60);
console.log(ctx.fillStyle);Linearer Verlauf als Hintergrund
const ctx = document.querySelector('canvas').getContext('2d');
const { width, height } = ctx.canvas;
const verlauf = ctx.createLinearGradient(0, 0, 0, height);
verlauf.addColorStop(0, '#87ceeb'); // Himmelblau oben
verlauf.addColorStop(1, '#ffffff'); // Weiß unten
ctx.fillStyle = verlauf;
ctx.fillRect(0, 0, width, height);
console.log(ctx.fillStyle instanceof CanvasGradient);Bildmuster und Zustandssicherung mit save()/restore()
const ctx = document.querySelector('canvas').getContext('2d');
const bild = new Image();
bild.src = 'kachel.png';
await bild.decode(); // warten, bis das Bild geladen ist
ctx.save();
ctx.fillStyle = ctx.createPattern(bild, 'repeat');
ctx.fillRect(0, 0, 200, 200);
ctx.restore(); // fillStyle ist wieder der vorherige Wert
ctx.font = '20px sans-serif';
ctx.fillText('Fertig', 10, 230);
console.log(ctx.fillStyle);Normalisierung beim Auslesen und ungültige Werte
const ctx = document.createElement('canvas').getContext('2d');
ctx.fillStyle = 'Orange';
console.log(ctx.fillStyle); // normalisiert
ctx.fillStyle = 'keine-farbe'; // ungültig, wird ignoriert
console.log(ctx.fillStyle);// Wichtig · Fallstricke
- Ungültige Werte werfen keinen Fehler, sondern werden still ignoriert – der vorherige Wert bleibt bestehen. Bei Fehlersuche daher den Wert zurücklesen.
- Vergleiche mit Strings wie
ctx.fillStyle === 'red'schlagen fehl, weil der Browser zu#ff0000normalisiert. - Verläufe und Muster sind im Koordinatensystem des Canvas verankert (unter Berücksichtigung der aktuellen Transformation), nicht an der Form – eine verschobene Form zeigt einen anderen Ausschnitt des Verlaufs.
- CSS-Variablen (
var(--farbe)) werden nicht aufgelöst; den Wert vorher pergetComputedStyle()ermitteln.currentcolorbezieht sich auf das<canvas>-Element (beiOffscreenCanvasschwarz). - Bilder aus fremden Quellen ohne CORS-Freigabe in
createPattern()machen das Canvas „tainted“; danach schlagengetImageData()undtoDataURL()mit einemSecurityErrorfehl. - Häufiges Umschalten von
fillStylein Schleifen kostet Leistung; Zeichenbefehle möglichst nach Farbe gruppieren. - Kompatibilität: in allen Browsern verfügbar, auch in
OffscreenCanvasRenderingContext2D. Moderne Farbsyntax (z. B.oklch(), Leerzeichen-getrenntesrgb()) hängt von der CSS-Unterstützung des Browsers ab.