Canvas States

Beginner
⏱️ 10 min read
📚 Updated: Aug 2025
🎯 Live + 2 Examples
save/restore
Canvas states tutorial illustration showing stacked saves and restores

What You’ll Learn

Canvas state is like a snapshot of your drawing context: styles, transforms, shadow settings, and the clipping region. You can push snapshots with save() and pop them with restore().

This is the easiest way to prevent changes (like shadows or rotations) from leaking into later drawings.

⚡ Quick Reference

State stack pattern
ctx.save();
// change styles/transforms
ctx.restore();
Styles fillStyle, strokeStyle, lineWidth…

Saved & restored

Transforms translate/rotate/scale

Saved & restored

Alpha & composite globalAlpha / globalCompositeOperation

Saved & restored

Clipping clip()

Saved & restored

👀 Live Preview — Save/Restore in Action

Toggle which changes are applied inside a saved state (shadow, rotate, alpha). Then compare the drawings before and after restore.

save → changes → restore

Tip: If you use clip(), always wrap it in save/restore. Otherwise your clipping region will keep affecting future drawings.

1

Basic save()/restore()

Save state, change a style, draw something, then restore so later drawings aren’t affected.

script.js
ctx.save();
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);
ctx.restore();
2

Nested States (Stack Behavior)

Each save() pushes another snapshot. restore() pops one level.

script.js
// base
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

ctx.save();
ctx.fillStyle = 'red';
ctx.fillRect(30, 30, 100, 100);

ctx.save();
ctx.rotate(0.5);
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 100, 100);

ctx.restore(); // undo rotate + green
ctx.fillRect(70, 70, 100, 100); // red

ctx.restore(); // back to blue
ctx.fillRect(90, 90, 100, 100); // blue

💡 Best Practices

Do

  • Wrap temporary styles (shadow/alpha/composite) in save()/restore()
  • Always scope clip() with save/restore
  • Keep save/restore balanced (like braces)
  • Use save/restore per object when drawing complex scenes
  • Reset transforms each frame in animations (or use save/restore)

Don’t

  • Forget to restore after transforms (rotation/scale will leak)
  • Assume save/restore clears pixels (it doesn’t)
  • Overuse deep state stacks inside tight loops without measuring
  • Mix globalAlpha/composite changes without scoping (hard to debug)
  • Leave a clip active and wonder why drawings disappear

❓ Frequently Asked Questions

It saves the current drawing state (styles, transforms, shadows, alpha/composite, and clipping region) onto a stack.
Typically nothing happens when there is no saved state. Still, keep save/restore balanced for maintainable code.
No. It only restores context state. Use clearRect() to clear pixels.
Whenever you temporarily change styles or transforms for one element and want to avoid affecting the rest of the scene.

Next: Canvas Text

Learn fillText(), strokeText(), fonts, and alignment.

Canvas Text →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

4 people found this page helpful

Canvas Shadow Canvas Text