YouTip LogoYouTip

Prop Canvas Shadowoffsety

# HTML canvas shadowOffsetY Property [![Image 8: Canvas Object Reference](#) 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 ![Image 9: Internet Explorer](#)![Image 10: Firefox](#)![Image 11: Opera](#)![Image 12: Google Chrome](#)![Image 13: Safari](#) 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](#)
← Met Canvas CreatelineargradienProp Canvas Shadowoffsetx β†’