Canvas shadowColor: Set the Color of Shadows
shadowColor sets the CSS color used for Canvas shadows. The default is fully transparent black, so a shadow is not visible until you assign a non-transparent color.
A visible shadow also needs at least one non-zero blur or offset value.
Basic shadowColor example Top ↑
const canvas = document.getElementById('shadow_demo');
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgb(0 0 0 / 55%)';
ctx.shadowBlur = 18;
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.fillStyle = '#4b8bf4';
ctx.fillRect(50, 35, 170, 90);Interactive shadow color demo Top ↑
When Canvas shadows are visible Top ↑
A shadow needs a non-transparent shadowColor. At least one of shadowBlur, shadowOffsetX, or shadowOffsetY must also be non-zero. Shadow settings affect later drawing operations until changed or restored.
Use save() and restore() to isolate shadow settings Top ↑
ctx.save();
ctx.shadowColor = 'rgb(0 0 0 / 45%)';
ctx.shadowBlur = 12;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;
ctx.fillRect(30, 30, 120, 70);
ctx.restore(); // later drawing has the previous stateCommon mistakes Top ↑
- Leaving
shadowColortransparent and expecting blur or offsets alone to show a shadow. - Forgetting that shadow state remains active for later drawings.
- Assuming
shadowBluris an exact pixel radius. - Using shadows as the only way to communicate important information.
Frequently asked questions Top ↑
What is the default shadowColor value? Top ↑
The default shadowColor is fully transparent black.
Do Canvas transforms change shadow blur or offsets? Top ↑
The shadow blur and offset values are not affected by the current transformation matrix.
Why is my Canvas shadow invisible? Top ↑
Set shadowColor to a non-transparent color and make at least one blur or offset value non-zero.
Can Canvas shadows be applied to text? Top ↑
Yes. The same shadow state can affect fillText() and strokeText() as well as shapes.
How do I stop shadows affecting later drawings? Top ↑
Reset the shadow properties or wrap shadowed drawing in save() and restore().
Related Canvas shadow tutorials Top ↑
shadowBlur | shadowColor | shadowOffsetX | shadowOffsetY | Canvas tutorial
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
