Canvas shadowOffsetX: Move Shadows Horizontally
shadowOffsetX moves a Canvas shadow horizontally. Positive values move the shadow to the right; negative values move it to the left. The default is 0.
Infinity and NaN are ignored, and the offset is not affected by the current transformation matrix.
Basic shadowOffsetX 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 horizontal 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 shadowOffsetX value? Top ↑
The default shadowOffsetX 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.
