Canvas shadowBlur: Control Shadow Softness
shadowBlur controls how soft the Canvas shadow appears. The value is a non-negative number. It is not defined as a number of pixels and is not affected by the current transformation matrix.
Negative values, Infinity and NaN are ignored.
Basic shadowBlur 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 softness 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 shadowBlur value? Top ↑
The default shadowBlur is 0.
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.
