Signatur
Beschreibung
Die Eigenschaft shadowColor des 2D-Kontexts bestimmt, welche Farbe ein Schatten hat, der beim Zeichnen entsteht. Das gilt für fillRect(), stroke(), fillText(), drawImage() und alle anderen Zeichenoperationen. Du kannst jede gültige CSS-Farbe angeben, also Farbnamen, Hex-Werte, rgb()/rgba(), hsl() und so weiter. Beim Auslesen bekommst du einen normalisierten String zurück: Deckende Farben kommen als #rrggbb, halbtransparente als rgba(...).
Der Standardwert ist rgba(0, 0, 0, 0), also vollständig transparentes Schwarz. Deshalb siehst du zunächst keinen Schatten, auch wenn du shadowBlur oder shadowOffsetX/shadowOffsetY setzt. Ein sichtbarer Schatten entsteht nur, wenn shadowColor nicht vollständig transparent ist und mindestens einer dieser Werte ungleich 0 ist: shadowBlur, shadowOffsetX oder shadowOffsetY.
shadowColor gehört zum Zeichenzustand des Kontexts. Du kannst den Wert also mit save() sichern und mit restore() wiederherstellen. So beschränkst du Schatten gezielt auf einzelne Elemente, ohne dass nachfolgende Zeichnungen ungewollt auch einen Schatten bekommen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | string | rgba(0, 0, 0, 0) | Ein als CSS-Farbwert auswertbarer String, z. B. 'red', '#333' oder 'rgba(0, 0, 0, 0.5)'. Ungültige Werte werden stillschweigend ignoriert. |
Rückgabewert
#rrggbb bei deckenden Farben, sonst rgba(r, g, b, a).Beispiele
Einfacher Schlagschatten für ein Rechteck
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = '#3498db';
ctx.fillRect(20, 20, 150, 100);
console.log(ctx.shadowColor);Leuchteffekt (Glow) für Text
const ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = '#111';
ctx.fillRect(0, 0, 300, 100);
// Glow: kein Versatz, nur Weichzeichnung
ctx.shadowColor = '#00e5ff';
ctx.shadowBlur = 20;
ctx.font = 'bold 36px sans-serif';
ctx.fillStyle = '#ffffff';
ctx.fillText('NEON', 90, 65);Schatten mit save()/restore() begrenzen
const ctx = document.querySelector('canvas').getContext('2d');
ctx.save();
ctx.shadowColor = 'hsl(0 0% 0% / 0.4)';
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 8;
ctx.fillStyle = 'tomato';
ctx.fillRect(20, 20, 100, 60);
ctx.restore();
// Hier wieder ohne Schatten
ctx.fillStyle = 'seagreen';
ctx.fillRect(150, 20, 100, 60);
console.log(ctx.shadowColor);Normalisierung und ungültige Werte
const ctx = document.createElement('canvas').getContext('2d');
ctx.shadowColor = 'red';
console.log(ctx.shadowColor);
ctx.shadowColor = 'keine-farbe'; // wird ignoriert
console.log(ctx.shadowColor);// Wichtig · Fallstricke
- Nicht sichtbar ohne Blur/Versatz: Wenn du nur
shadowColorsetzt, erscheint kein Schatten. Dazu musst du zusätzlichshadowBlur,shadowOffsetXodershadowOffsetYauf einen Wert ungleich 0 setzen. - Schatten „kleben“: Die Einstellung gilt für alle folgenden Zeichenoperationen. Setze sie deshalb zurück (
shadowColor = 'transparent') oder arbeite mitsave()/restore(). - Ungültige Farbwerte lösen keinen Fehler aus. Sie werden stillschweigend verworfen, der vorherige Wert bleibt erhalten.
- Performance: Schatten, besonders mit großem
shadowBlur, sind rechenintensiv. Bei Animationen mit vielen Objekten solltest du Schatten sparsam einsetzen oder vorab in ein Offscreen-Canvas zeichnen. - Die Alpha-Komponente der Schattenfarbe wird mit
globalAlphakombiniert. - Die Eigenschaft gibt es auch in
OffscreenCanvasRenderingContext2D. Sie wird von allen gängigen Browsern unterstützt.