Canvas : Shadow
How to cast a shadow
Since you now know how to draw a rectangle, you probably want to make it more sytlish by casting a shadow. Well, it can be pretty simple. You just need to add a few more lines into your code. Let's first look at the properties that will be involved in casting a shadow.
| Context properties | Descriptions |
|---|---|
| shadowOffsetX | Horizontal distance (x-axis) between the shadow and the shape in pixel. |
| shadowOffsetY | Vertical distance (y-axis) between the shadow and the shape in pixel. |
| shadowBlur | How blur you want your shadow to be. |
| shadowColor | Obviously, this is to set the color of your shadow |
Here you go
As you can see in the code above, in order to draw a shape with shadow, you need to first specify the shadow properties before "drawing" the shape.