Undoing Transforms
Understand how to undo transformations on the HTML5 canvas by using the resetTransform method and manual techniques. Learn why transforms persist across drawing operations and how to properly reset scale and translation to avoid unwanted effects. This lesson clarifies core concepts to help you manage canvas states for precise drawing.
We'll cover the following...
This may be the part you have been eagerly waiting for. As you probably realized by now, transforming the canvas isn’t an operation that resets itself with each thing you draw. It’s not like a fillStyle or strokeStyle. The transformation is always there for any draw operation you perform in the future. That isn’t always desirable, right?
To handle this, you need to explicitly turn the transforms off. There are several ways you can do with this. We’ll look at two approaches in this section and focus on a slightly different (and heavy-handed) approach in a future tutorial where we look at how to save and restore state.
Resetting the Transform…the Easy Way
The easiest way to reset a transform is to ...