Prop Canvas Shadowoffsety
# HTML canvas shadowOffsetY Property
[ Canvas Object](#)
## Example
Draw a rectangle with a shadow offset 20 pixels down from the top of the rectangle:
YourbrowserdoesnotsupporttheHTML5canvastag.
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.shadowBlur=10; ctx.shadowOffsetY=20; ctx.shadowColor="black"; ctx.fillStyle="red"; ctx.fillRect(20,20,100,80);
[Try it Yourself Β»](#)
* * *
## Browser Support

The shadowOffsetY property is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
**Note:** Internet Explorer 8 and earlier versions do not support the element.
* * *
## Definition and Usage
The shadowOffsetY property sets or returns the vertical distance of the shadow from the shape.
shadowOffsetY=0 indicates the shadow is directly below the shape.
shadowOffsetY=20 indicates the shadow is 20 pixels below the top of the shape.
shadowOffsetY=-20 indicates the shadow is 20 pixels above the top of the shape.
**Tip:** To adjust the horizontal distance of the shadow from the shape, use the (#) property.
| Default value: | 0 |
| --- |
| JavaScript syntax: | _context_.shadowOffsetY=_number_; |
## Property Values
| Value | Description |
| --- | --- |
| _number_ | A positive or negative value defining the vertical distance of the shadow from the shape. |
* * Canvas Object](#)
YouTip