CanvasRenderingContext2D: shadowOffsetY property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
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
html
<canvas id="canvas"></canvas>
JavaScript
js
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
Specifications
Specification |
---|
HTML Standard # dom-context-2d-shadowoffsety-dev |
Browser compatibility
BCD tables only load in the browser
See also
- The interface defining this property:
CanvasRenderingContext2D
CanvasRenderingContext2D.shadowOffsetX
CanvasRenderingContext2D.shadowColor
CanvasRenderingContext2D.shadowBlur