Latest web development tutorials

HTML canvas shadowOffsetY property

HTML canvas Reference Manual HTML canvas Reference Manual

Examples

Draw a rectangle with a shadow offset down 20 pixels (from the top position 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"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome and Safari support shadowOffsetY property.

Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.


Definition and Usage

shadowOffsetY property sets or returns the vertical distance of the shadow shape.

shadowOffsety = 0 indicates just below the shadow located shape.

shadowOffsetY = 20 indicates the shape of the shadow is located at 20 pixels below the top position.

shadowOffsetY = -20 indicating the shape of the shadow of the 20-pixel top positions above.

Tip: To adjust the shape of the shadow and the horizontal distance, use shadowOffsetX property.

Defaults: 0
JavaScript syntax: context.shadowOffsetY = number;

Property Value

描述
number 正值或负值,定义阴影与形状的垂直距离。


HTML canvas Reference Manual HTML canvas Reference Manual