CanvasRenderingContext2D.shadowOffsetX — Eigenschaft · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.shadowOffsetX

Beschreibung

Die Eigenschaft shadowOffsetX des CanvasRenderingContext2D bestimmt den horizontalen Versatz von Schatten, die beim Zeichnen von Formen, Text und Bildern entstehen. Der Wert ist eine Gleitkommazahl in Koordinatenraum-Einheiten. Positive Werte verschieben den Schatten nach rechts, negative nach links. Der Standardwert ist 0.

Meist setzt man shadowOffsetX zusammen mit shadowOffsetY, shadowBlur und shadowColor. So lassen sich Effekte wie Schlagschatten, angehobene Karten oder ein Leuchten (Versatz 0 und starke Unschärfe) umsetzen.

Wichtig: Ein Schatten wird nur gezeichnet, wenn shadowColor nicht vollständig transparent ist. Außerdem muss mindestens einer der Werte shadowBlur, shadowOffsetX oder shadowOffsetY ungleich 0 sein. Die Einstellung gehört zum Zeichenzustand und lässt sich deshalb mit save() sichern und mit restore() wiederherstellen.

Parameter

Name	Typ	Default	Beschreibung
$value	number	0	Horizontaler Versatz des Schattens in Koordinatenraum-Einheiten. `Infinity`, `-Infinity` und `NaN` werden ignoriert.

Rückgabewert

Typ

number

Beschreibung

Der aktuell gesetzte horizontale Schattenversatz, standardmäßig 0.

Beispiele

Einfacher Schlagschatten nach rechts

const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 150;
document.body.append(canvas);
const ctx = canvas.getContext('2d');

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 4;

ctx.fillStyle = '#3b82f6';
ctx.fillRect(40, 30, 120, 70);
console.log(ctx.shadowOffsetX);

10

Negativer Versatz für Textschatten nach links

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

ctx.font = 'bold 36px sans-serif';
ctx.shadowColor = '#f97316';
ctx.shadowOffsetX = -4;
ctx.shadowOffsetY = 2;
ctx.fillStyle = '#111';
ctx.fillText('Hallo Canvas', 30, 80);

Schatten mit save()/restore() nur auf ein Element anwenden

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

ctx.save();
ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
ctx.shadowOffsetX = 6;
ctx.shadowOffsetY = 6;
ctx.shadowBlur = 8;
ctx.fillStyle = 'white';
ctx.fillRect(20, 20, 160, 90); // Karte mit Schatten
ctx.restore();

// Ohne Schatten, da der Zustand wiederhergestellt wurde
ctx.fillStyle = '#333';
ctx.fillText('Kartentitel', 30, 45);
console.log(ctx.shadowOffsetX);

Ungültige Werte werden ignoriert

const ctx = document.createElement('canvas').getContext('2d');
ctx.shadowOffsetX = 5;
ctx.shadowOffsetX = NaN;
ctx.shadowOffsetX = Infinity;
console.log(ctx.shadowOffsetX);

5

// Wichtig · Fallstricke

Kein sichtbarer Schatten? Der Standardwert von shadowColor ist rgba(0, 0, 0, 0), also völlig transparent. Ohne eigene Schattenfarbe bleibt shadowOffsetX ohne Wirkung.
Transformationen: Der Schattenversatz wird von der aktuellen Transformationsmatrix nicht beeinflusst. scale() und rotate() verändern also weder Richtung noch Länge des Versatzes.
Performance: Schatten, vor allem mit Unschärfe (shadowBlur), sind beim Zeichnen teuer. In Animationen mit vielen Objekten sollte man Schatten sparsam einsetzen oder vorab in ein separates Canvas zeichnen.
Nicht-endliche Werte (NaN, ±Infinity) werden stillschweigend ignoriert, es wird kein Fehler ausgelöst.
Die Eigenschaft wird von allen modernen Browsern unterstützt und ist auch in OffscreenCanvasRenderingContext2D verfügbar.

Siehe auch

CanvasRenderingContext2D.shadowOffsetY CanvasRenderingContext2D.shadowBlur CanvasRenderingContext2D.shadowColor CanvasRenderingContext2D.save() CanvasRenderingContext2D