web api instance property

CanvasRenderingContext2D: shadowOffsetY property

The CanvasRenderingContext2D.shadowOffsetY property of the Canvas 2D API specifies the distance that shadows will be offset vertically.

[!NOTE] Shadows are only drawn if the shadowColor property is set to a non-transparent value. One of the shadowBlur, shadowOffsetX, or shadowOffsetY properties must be non-zero, as well.

Value

A float specifying the distance that shadows will be offset vertically. Positive values are down, and negative are up. The default value is 0 (no vertical offset). Infinity and NaN values are ignored.

Examples

Moving a shadow vertically

This example adds a blurred shadow to a rectangle. The shadowColor property sets its color, shadowOffsetY sets its offset 25 units towards the bottom, and shadowBlur gives it a blur level of 10.

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);

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.