Canvas shadowOffsetY attribute

Canvas Reference Manual

Definition and usage

shadowOffsetY Property settings or returns the vertical distance between the shape and the shadow.

  • shadowOffsetY=0 Indicates that the shadow is directly below the shape
  • shadowOffsetY=20 Indicates that the shadow is 20 pixels below the top position of the shape
  • shadowOffsetY=-20 Indicates that the shadow is 20 pixels above the top position of the shape

Tip:To adjust the horizontal position of the shape, use shadowOffsetX Properties.

Example

Draw a rectangle with a shadow offset 20 pixels down (from the top position of the rectangle):

Your browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

Try it yourself

Syntax

context.shadowOffsetY=number;

Attribute value

Value Description
number The positive or negative value defines the vertical distance between the shadow and the shape.

Technical Details

Default Value: 0

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

Canvas Reference Manual