Managing Canvas State with save() and restore()
Think of save() and restore() as checkpoints for your canvas. `save()` pushes the current drawing state (styles, transforms) onto a stack, and `restore()` pops it back off. Use this to temporarily apply a transformation to just one element.
Think of the canvas state stack like function calls: `save()` pushes the current context (styles, transforms, alphas) onto a stack, and `restore()` pops it off, reverting to the previous state. This is essential for complex scenes, letting you rotate() to draw one object, then restore() to draw the next. The most common error is forgetting to call `restore()`, leaving your canvas permanently transformed and misplacing all subsequent drawings.
Read the original → developer.mozilla.org
- #canvas
- #web apis
- #javascript
- #graphics
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.