YouTipCanvas Shadowoffsetx
## HTML Canvas shadowOffsetX Property
The `shadowOffsetX` property of the Canvas 2D API sets or returns the horizontal distance of a shadow from the shape it is cast from.
By pairing this property with `shadowOffsetY`, `shadowColor`, and `shadowBlur`, you can create realistic 3D depth effects, drop shadows, and glowing aesthetics for shapes, text, and images drawn on a canvas.
---
## Syntax and Usage
To get or set the horizontal shadow offset, use the following JavaScript syntax:
```javascript
// Get the current horizontal shadow offset
let currentOffset = context.shadowOffsetX;
// Set a new horizontal shadow offset
context.shadowOffsetX = number;
```
### Property Values
| Value | Description |
| :--- | :--- |
| `number` | A float value (positive, negative, or zero) representing the horizontal distance of the shadow in pixels. The default value is `0`. |
### How the Offset Works
* **`shadowOffsetX = 0`**: The shadow is positioned directly behind the shape (no horizontal displacement).
* **Positive values (`shadowOffsetX > 0`)**: The shadow is offset to the **right** of the shape.
* **Negative values (`shadowOffsetX < 0`)**: The shadow is offset to the **left** of the shape.
> **Tip:** To adjust the vertical distance of the shadow, use the companion property (canvas-shadowoffsety.html).
---
## Code Examples
### Example 1: Basic Drop Shadow
This example draws a red rectangle with a black shadow offset 20 pixels to the right and blurred by 10 pixels.
```html
```
### Example 2: Left-Facing Shadow (Negative Offset)
If you want the light source to appear from the right, you can project the shadow to the left by using a negative value.
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Configure a shadow offset to the left
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // Semi-transparent black
ctx.shadowBlur = 8;
ctx.shadowOffsetX = -15; // Offset 15px to the left
ctx.shadowOffsetY = 10; // Offset 10px down
// Draw a blue circle
ctx.beginPath();
ctx.arc(150, 75, 40, 0, 2 * Math.PI);
ctx.fillStyle = "#007acc";
ctx.fill();
```
---
## Important Considerations
1. **Performance Impact:** Rendering shadows requires significant pixel processing. Overusing high `shadowBlur` values or applying shadows to complex, animated paths can degrade rendering performance, especially on mobile devices.
2. **Resetting Shadows:** Shadows apply to all subsequent drawing operations once set. To disable shadows for later shapes, reset the shadow properties to their defaults:
```javascript
ctx.shadowColor = "transparent"; // Or set shadowBlur, shadowOffsetX, and shadowOffsetY to 0
```
3. **Coordinate Space:** The offset distance is unaffected by the current transformation matrix (scaling or rotation) applied to the context. It is always measured in standard canvas coordinate pixels.
---
## Browser Compatibility
| Browser | Minimum Version Supported |
| :--- | :--- |
| **Google Chrome** | Yes (All modern versions) |
| **Mozilla Firefox** | Yes (All modern versions) |
| **Microsoft Edge / IE** | Edge 12+, Internet Explorer 9+ |
| **Safari** | Yes (All modern versions) |
| **Opera** | Yes (All modern versions) |
*Note: Internet Explorer 8 and earlier versions do not support the `