Canvas Transformations

So far everything we’ve drawn on the canvas was done without thinking much about exactly what our pixels are drawn into. Saying that our pixels are drawn on the canvas is only one part of the full picture. Under the canvas is an invisible virtual grid:

It is this invisible virtual grid that all of the various draw commands we've seen map their pixels into. By default, this grid isn't very interesting. It becomes a whole lot more interesting when you transform it. You can rotate this grid:

You can shift the starting point of this grid:

You can even scale each individual "cell" inside the grid to be larger or smaller:

Why is this interesting? It is interesting because your canvas and anything you draw inside it will get scaled, rotated, or translated as well. This sort of makes up for the lack of interesting things you can do with the draw methods we’ve seen. At most, you can specify the size and position. That’s not a lot, so transforms provide you with a few more ways of customizing what you draw. In this tutorial, we are going to learn all about it.

Onwards!