YouTipProp Canvas Shadowoffsetx
# HTML canvas shadowOffsetX Property
[ Canvas Object](#)
## Example
Draw a rectangle with a shadow offset 20 pixels to the right (from the rectangle's left position):
YourbrowserdoesnotsupporttheHTML5canvastag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);
[Try it »](#)
* * *
## Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the shadowOffsetX property.
**Note:** Internet Explorer 8 and earlier versions do not support the element.
* * *
## Definition and Usage
The shadowOffsetX property sets or returns the horizontal distance of the shadow from the shape.
shadowOffsetX=0 indicates the shadow is directly below the shape.
shadowOffsetX=20 indicates the shadow is 20 pixels to the right of the shape's left position.
shadowOffsetX=-20 indicates the shadow is 20 pixels to the left of the shape's left position.
**Tip:** To adjust the vertical distance of the shadow from the shape, use the (#) property.
| Default value: | 0 |
| --- |
| JavaScript syntax: | _context_.shadowOffsetX=_number_; |
## Property Values
| Value | Description |
| --- | --- |
| _number_ | A positive or negative value defining the horizontal distance of the shadow from the shape. |
* * Canvas Object](#)