Working with states and transforms

So when we're using the drawing API to actually draw things to our Canvas element, we actually …have the ability to transform the drawing commands before we actually do them. …So in this example, I have my Canvas and I've set a fillStyle to blue, a strokeStyle to …black and set the lineWidth to 10. …So let's say that I wanted to actually draw a stroked rectangle, but I actually want to …translate it first, and translation means, I'm essentially moving where I'm going to start drawing.…

So I can call the translate method on my context and essentially move the paintbrush to a specific location. …I'm going to move it to 400 on the X and 100 on the Y. …Now I can also rotate the Canvas, or how I'm actually going to draw into the Canvas, by …calling the rotate method, so ctx.rotate. …And to this I actually pass in a value in radians. …So again, I can't use degrees here, so I'm going to say Math.PI/4 …and this is essentially going to rotate how I'm going to draw into the Canvas.…

So any elements the directly on the Canvas already are not going to be affected by this, …