YouTipCanvas Shadowoffsety
## HTML Canvas `shadowOffsetY` Property
The `shadowOffsetY` property of the Canvas 2D API sets or returns the vertical distance of a shadow from the shape it is cast from.
By combining `shadowOffsetY` with other shadow properties—such as `shadowOffsetX`, `shadowBlur`, and `shadowColor`—you can create realistic 3D depth effects, drop shadows, and glowing aesthetics for your canvas drawings.
---
## Syntax and Usage
```javascript
context.shadowOffsetY = number;
```
### Property Values
| Value | Description |
| :--- | :--- |
| `number` | A float value (positive or negative) representing the vertical distance of the shadow in pixels. The default value is `0`. |
### How the Offset Works:
* **`shadowOffsetY = 0`**: The shadow is positioned directly behind the shape (no vertical offset).
* **Positive values (`shadowOffsetY > 0`)**: The shadow is offset **downward**, appearing below the shape.
* **Negative values (`shadowOffsetY < 0`)**: The shadow is offset **upward**, appearing above the shape.
> **Tip:** To adjust the horizontal distance of the shadow, use the [`shadowOffsetX`](canvas-shadowoffsetx.html) property.
---
## Code Examples
### Example 1: Basic Drop Shadow
This example draws a red rectangle with a shadow offset 20 pixels downward from the top edge of the shape.
```html
```
### Example 2: Upward vs. Downward Offsets
You can control the direction of the shadow by toggling between positive and negative values.
```javascript
const canvas = document.getElementById("demoCanvas");
const ctx = canvas.getContext("2d");
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 8;
ctx.fillStyle = "#3498db";
// 1. Shadow offset downward (Positive Y)
ctx.shadowOffsetY = 15;
ctx.fillRect(30, 30, 80, 80);
// 2. Shadow offset upward (Negative Y)
ctx.shadowOffsetY = -15;
ctx.fillRect(160, 30, 80, 80);
```
---
## Important Considerations
1. **Performance Impact**: Rendering shadows requires significant pixel processing. If you are animating objects on a canvas, excessive use of shadows (especially with high `shadowBlur` values) can degrade rendering performance.
2. **Global State**: Like other canvas context properties, `shadowOffsetY` is part of the global drawing state. If you only want to apply a shadow to a specific shape, remember to reset `shadowOffsetY` to `0` (or call `ctx.save()` and `ctx.restore()`) before drawing subsequent elements.
3. **Transparency**: Shadows respect the transparency of the source shape. If you draw a semi-transparent shape, its shadow will also be semi-transparent.
---
## Browser Compatibility
| Chrome | Edge / IE | Firefox | Safari | Opera |
| :---: | :---: | :---: | :---: | :---: |
| Yes | IE 9+ / Yes | Yes | Yes | Yes |
*Note: Internet Explorer 8 and earlier versions do not support the `