The CanvasRenderingContext2D
.shadowOffsetY
property of the Canvas 2D API specifies the distance that shadows will be offset vertically.
ctx.shadowOffsetY = offset;
offset
0
. Infinity
and NaN
values are ignored.shadowOffsetY
propertyThis example uses the shadowOffsetY
property to apply a vertical offset to a shadow. Note that shadows are only drawn if the shadowColor
property is set to a non-transparent value, as well.
<canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.shadowColor = 'red'; ctx.shadowOffsetY = 25; ctx.shadowBlur = 10; ctx.fillStyle = 'black'; ctx.fillRect(10, 10, 100, 100);
Edit the code below to see your changes update live in the canvas:
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.shadowOffsetY' in that specification. | Living Standard |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | 12 | Yes | Yes | Yes | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
CanvasRenderingContext2D
.CanvasRenderingContext2D.shadowOffsetX
CanvasRenderingContext2D.shadowColor
CanvasRenderingContext2D.shadowBlur
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY