YouTipCanvas Shadowcolor
## HTML Canvas `shadowColor` Property
The `shadowColor` property of the Canvas 2D API sets or returns the color used for shadows.
By default, the shadow color is fully transparent black (`rgba(0,0,0,0)`), meaning no shadow will be visible unless this property is configured alongside other shadow properties like `shadowBlur`, `shadowOffsetX`, or `shadowOffsetY`.
---
## Syntax and Usage
To set or retrieve the shadow color, use the following JavaScript syntax:
```javascript
// Get the current shadow color
let currentShadowColor = context.shadowColor;
// Set a new shadow color
context.shadowColor = color;
```
### Property Values
| Value | Description |
| :--- | :--- |
| `color` | A string parsed as a CSS `` value. The default value is fully transparent black (`rgba(0,0,0,0)`). |
### Supported Color Formats
Since the property accepts standard CSS color values, you can define the shadow color using any of the following formats:
* **Color Keywords:** `"black"`, `"red"`, `"blue"`, `"transparent"`
* **HEX:** `"#000000"`, `"#ff0000"`, `"#333"`
* **RGB / RGBA:** `"rgb(255, 0, 0)"`, `"rgba(0, 0, 0, 0.5)"` (highly recommended for controlling shadow opacity)
* **HSL / HSLA:** `"hsl(120, 100%, 50%)"`, `"hsla(240, 100%, 50%, 0.3)"`
---
## Code Examples
### Example 1: Drawing a Red Rectangle with a Black Shadow
To make a shadow visible, you must define both a `shadowColor` and a blur level (`shadowBlur`).
```html
```
### Example 2: Using Offset and Semi-Transparent Shadows
For a more realistic drop-shadow effect, combine `shadowColor` with `shadowOffsetX`, `shadowOffsetY`, and a semi-transparent `rgba` color.
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Configure a soft, offset drop shadow
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;
ctx.shadowBlur = 10;
ctx.shadowColor = "rgba(0, 0, 0, 0.4)"; // 40% opaque black
// Draw a blue circle
ctx.beginPath();
ctx.arc(150, 75, 40, 0, 2 * Math.PI);
ctx.fillStyle = "#3498db";
ctx.fill();
```
---
## Important Considerations
1. **Performance Impact:** Rendering shadows requires significant pixel processing. Overusing shadows—especially with high `shadowBlur` values or on complex, animated paths—can severely degrade canvas rendering performance.
2. **Resetting Shadows:** To disable shadows for subsequent drawings, reset the `shadowColor` back to its default transparent state, or set `shadowBlur`, `shadowOffsetX`, and `shadowOffsetY` to `0`:
```javascript
ctx.shadowColor = "rgba(0, 0, 0, 0)"; // Disables shadow rendering
```
3. **Global State:** Like `fillStyle` and `strokeStyle`, `shadowColor` is part of the global 2D context state. It will apply to all shapes, text, and images drawn after it is set until it is changed or reset.
---
## Browser Compatibility
| Feature | Chrome | Edge/IE | Firefox | Opera | Safari |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`shadowColor`** | Yes (All) | IE 9+ | Yes (All) | Yes (All) | Yes (All) |
*Note: Internet Explorer 8 and earlier versions do not support the `