Draw a rectangle with a shadow placed 20 pixels to the right from the rectangle's left position:
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="180" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.shadowBlur = 10;// www. j av a2 s .c om ctx.shadowOffsetX = 20; ctx.shadowColor = "black"; ctx.fillStyle = "red"; ctx.fillRect(20, 20, 100, 80); </script> </body> </html>
The shadowOffsetX property sets or gets the horizontal distance of the shadow from the shape.
shadowOffsetX = 0 indicates that the shadow is right behind the shape.
shadowOffsetX = 20 indicates that the shadow starts 20 pixels to the right from the shape's left position.
shadowOffsetX = -20 indicates that the shadow starts 20 pixels to the left from the shape's left position.
To adjust the vertical distance of the shadow from the shape, use the shadowOffsetY property.
The shadowOffsetX property Default value: 0
context.shadowOffsetX = number;
Property Values
| Value | Description |
|---|---|
| number | A number that defines the horizontal distance of the shadow from the shape. Negative allowed. |