CanvasRenderingContext2D: shadowOffsetY-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.shadowOffsetY-Eigenschaft der Canvas 2D API gibt die Entfernung an, um die Schatten vertikal versetzt werden.

Hinweis: Schatten werden nur gezeichnet, wenn die shadowColor-Eigenschaft auf einen nicht-transparenten 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.shadowOffsetY = 25;
ctx.shadowBlur = 10;

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