From the course: Learning HTML Canvas

The canvas state

From the course: Learning HTML Canvas

Start my 1-month free trial

The canvas state

“

- [Tutor] Before we go further, in learning how to draw on the Canvas, we should take a moment and learn about the Canvas State, and understand how it works. So each context that you get on a Canvas maintains what's called the drawing state, which your code can manage. The canvas drawing state keeps track of several properties of the Canvas. It keeps track of the current values of the linewidth, strokeStyle, the fillStyle, the linecaps extra. All the stuff that we've seen so far, and how to draw shapes like rectangles and lines. It also keeps track of some more advanced properties such as the current transformation matrix and the clipping region, and we'll see both of those later in the course. You can save the current Canvas state, and you can restore a previous one. So states are basically pushed onto a stack of saved states. So each time you save the drawing state, it goes on the top of the stack, and then when you restore it, the one that's currently on top of the stack gets popped off and becomes the current Drawing state. So that begs the question, why would you want to do this? Well, your code may have a set of a whole bunch of drawing settings, And during the course of drawing, you might want to just make a minor tweak to one of those settings, But you don't want to have to keep track of each of those manually. So saving and restoring the Canvas State, does all of that for you. To save and restore the state, all you need to do is use the Save and restore functions. essentially you call context Save, and then you change the Canvas settings like the current linewidth, the current fillstyle, strokestyle and so on. And when you're all done, all you have to do is call context restore, And that will put the drawing state back into the state that it was before you called save and made any changes. So let's actually take a look at how this works in real code. So in my editor, I'm going to go and open up drawing state_start. And here in the code, you can see I've set up some drawing parameters such as stroke and fillstyles and then we draw a rectangle. And then I change some settings, and draw another shape, followed by some code that draws a third shape, but doesn't yet set any context properties. So let's run what we already have in the browser. And you can see that the second two shapes have the same stroke and fillstyle, because the global context properties are changed, when the second shape is drawn, but they aren't set back to their original values. So to prevent that, I can save and restore the Canvas state. So let's add that code here before I draw shape number two. So what I'm going to do is, write context.save and then I'm going to restore it, before I draw shape number three. Alright, so now we go back to the browser and refresh, you can see that, the shapes one and three look the same, because I saved the Canvas State before changing the properties for shape two, and then restore it back. Now this may seem like a trivial example but later on when you're drawing really complex drawings, and you're making minor changes to the drawing context properties, this really comes in handy, and relieves your code from having to do a lot of manual work to keep track of all the different drawing properties.

Contents