Canvas shadowOffsetX attribute

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 Whether positive or negative, defines the horizontal 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