HTML canvas shadowOffsetY attribute

HTML5 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 shape's top position
  • shadowOffsetY=-20 Indicates that the shadow is 20 pixels above the shape's top position

Tip:To adjust the horizontal position of the shape's distance, please use shadowOffsetX Properties.

Instance

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

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 Positive or negative value, defining 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.

HTML5 Canvas Reference Manual