HTML canvas shadowOffsetX attribute

HTML5 Canvas Reference Manual

Definition and Usage

shadowOffsetX Property sets or returns the horizontal distance between the shape and the shadow.

  • shadowOffsetX=0 Indicates that the shadow is directly below the shape
  • shadowOffsetX=20 Indicates that the shadow is 20 pixels to the right of the shape's left position
  • shadowOffsetX=-20 Indicates that the shadow is 20 pixels to the left of the shape's left position

Tip:To adjust the vertical position from the shape, use shadowOffsetY Properties.

Example

Draw a rectangle with a shadow offset 20 pixels to the right (from the rectangle's left position):

Your browser does not support the canvas tag.

JavaScript:

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

Try It Yourself

Syntax

context.shadowOffsetX=number;

Attribute Value

Value Description
number Positive or negative value, defines the horizontal distance of the shadow from the shape.

Technical Details

Default Value: 0

Browser Support

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

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