Shadows
Adding shadows to shapes and text can provide depth and realism to your canvas drawings.
The 2D rendering context includes four properties to control shadow effects:
| Property | Description |
|---|---|
shadowBlur |
The amount of blur applied to the shadow (default is 0). |
shadowColor |
The color of the shadow (default is fully transparent black). |
shadowOffsetX |
The horizontal distance of the shadow from the shape (default is 0). |
shadowOffsetY |
The vertical distance of the shadow from the shape (default is 0). |
Shadow Example
This example demonstrates how to apply a basic shadow to a rectangle and a circle:
Shadow Performance
Complex shadows can impact performance, especially with high shadowBlur values or when many objects are shadowed. Use shadows sparingly in real-time animations.
The next lesson explains how to implement text onto the canvas.