Lesson: Draw a Row of Windows on the Top Floor of a Building
To draw a row of windows, we are going to use a for loop. A for loop allows
us to perform a set of actions over and over again.
In this example, we draw a row of French flags.
We start by saving the context and moving the coordinate system to (20, 120).
This is where we will draw the first French flag.
We then start our loop by assigning i = 0. Everytime the loop runs, we will
add 1 to i. So, the first time through the loop, i = 0. The second time, i = 1.
The third time, i = 2. The loop keeps running as long as i < 6. This means
the loop will run six times and end once i = 5.
Inside of the loop, we draw a French flag at the origin of the current
coordinate system, and then move the origin of the coordinate system 80 pixels
to the right using context.translate(80, 0).
Finally, we restore the context so the origin of the coordinate system is back at the top left corner of the canvas.
What would happen if, instead of using context.translate(80, 0) inside of the for loop, we used context.translate(80, 30)?
save() / restore()