Canvas shadowOffsetY: Move Shadows Vertically
shadowOffsetY moves a Canvas shadow vertically. Positive values move the shadow down; negative values move it up. The default is 0.
Infinity and NaN are ignored, and the offset is not affected by the current transformation matrix.
Basic shadowOffsetY 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 vertical shadow position 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 shadowOffsetY value? Top ↑
The default shadowOffsetY 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.
