CanvasRenderingContext2D: shadowOffsetX-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die CanvasRenderingContext2D.shadowOffsetX-Eigenschaft der Canvas 2D API gibt die horizontale Distanz an, um die Schatten versetzt werden.

Hinweis: Schatten werden nur gezeichnet, wenn die shadowColor-Eigenschaft auf einen undurchsichtigen Wert gesetzt ist. Eine der Eigenschaften shadowBlur, shadowOffsetX oder shadowOffsetY muss ebenfalls ungleich null sein.

HTML

html

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 25;
ctx.shadowBlur = 10;

// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);