Draw a rectangle with a shadow placed 20 pixels below the rectangle's top 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;/*from w w w .j a v a2s .co m*/ ctx.shadowOffsetY = 20; ctx.shadowColor = "black"; ctx.fillStyle = "red"; ctx.fillRect(20, 20, 100, 80); </script> </body> </html>
The shadowOffsetY property sets or gets the vertical distance of the shadow from the shape.
shadowOffsety = 0 indicates that the shadow is right behind the shape.
shadowOffsetY = 20 indicates that the shadow starts 20 pixels below the shape's top position.
shadowOffsetY = -20 indicates that the shadow starts 20 pixels above the shape's top position.
To adjust the horizontal distance of the shadow from the shape, use the shadowOffsetX property.
The shadowOffsetY property Default value: 0
context.shadowOffsetY = number;
Property Values
| Value | Description |
|---|---|
| number | A number that defines the vertical distance of the shadow from the shape. Negative allowed |