YouTipCanvas Shadowblur
## HTML Canvas `shadowBlur` Property
The `shadowBlur` property of the Canvas 2D API defines the blur level for shadows. It determines how soft or diffuse the shadow edges appear.
---
## Introduction
When drawing shapes, text, or images on an HTML5 Canvas, you can add realistic depth by applying shadows. The `shadowBlur` property controls the Gaussian blur radius applied to the shadow.
A value of `0` indicates no blur (sharp, crisp edges), while larger numbers create a softer, more spread-out shadow effect.
---
## Syntax & Usage
### JavaScript Syntax
```javascript
context.shadowBlur = value;
```
### Property Values
| Value | Description | Default Value |
| :--- | :--- | :--- |
| `number` | A non-negative float representing the blur level. Larger numbers increase the blur radius. Negative values, `Infinity`, and `NaN` are ignored. | `0` |
### Key Characteristics
* **Dependency:** The shadow is only visible if `shadowColor` is set to a non-transparent color.
* **Performance:** High blur values (e.g., > 50) require more processing power and can impact rendering performance, especially during animations.
---
## Code Examples
### Example 1: Basic Shadow Blur on a Rectangle
This example draws a red rectangle with a soft black shadow that has a blur level of `20`.
```html
```
### Example 2: Combining Blur with Offsets
To make shadows look more realistic, you typically combine `shadowBlur` with `shadowOffsetX` and `shadowOffsetY` to position the shadow relative to the shape.
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Configure a realistic drop shadow
ctx.shadowBlur = 10;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // Semi-transparent black
ctx.shadowOffsetX = 8; // Shift shadow 8px to the right
ctx.shadowOffsetY = 8; // Shift shadow 8px down
// Draw a blue circle
ctx.beginPath();
ctx.arc(150, 75, 40, 0, 2 * Math.PI);
ctx.fillStyle = "#007acc";
ctx.fill();
```
---
## Important Considerations
1. **Resetting Shadows:**
Shadows are part of the global 2D context state. Once you set `shadowBlur`, all subsequent shapes drawn on the canvas will have shadows. To disable shadows for subsequent drawings, reset the properties:
```javascript
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
```
Alternatively, you can manage the state using `ctx.save()` and `ctx.restore()`.
2. **Performance Optimization:**
Because blurring requires a pixel-by-pixel convolution operation, rendering large shapes with high `shadowBlur` values can cause lag. If you need complex shadows in high-performance applications (like games), consider pre-rendering the shadowed elements onto an offscreen canvas.
---
## Browser Compatibility
| Chrome | Edge | Firefox | Opera | Safari | Internet Explorer |
| :---: | :---: | :---: | :---: | :---: | :---: |
| Yes | Yes | Yes | Yes | Yes | IE 9+ |
*Note: Internet Explorer 8 and earlier versions do not support the `