Draw Order Matters

We are almost done here. One last thing to call out is the order with which things get rendered on the canvas. The canvas follows what is known as the “painters model” of rendering. All of your draw operations are added to the canvas in the order they were specified in. This means the first shape you define in your code will be added to the canvas first. The second shape you define will be added next and drawn over the top of the first shape (if they overlap). The third shape will…you see the pattern:

From a visual point of view, the implications of this model are huge. Each shape will be drawn on top of whatever shape preceded it. This means the order in which you specify your shapes matters just like it would in the real world where you are using a paintbrush and layering on colors. Once a shape has been layered on, you can’t easily rearrange it unless you alter your code. You can thank the immediate graphics mode nature of the canvas element for that little gift!