S2JS - Introduction to drawing on the canvas : Drawing order

Here's a third rectangle: green and overlapping the red one.

See how the green rectangle is "in front of" the red rectangle?

Have a look at the code, and notice the order in which things are done.

Imagine you put a red card down on your desk, and then put a green one down so it overlapped. What would you see? Imagine if you did them in the reverse order.

Try changing the order of the rectangles and see which appears "in front of" the other.

<HTML> <head> <title> My new Web Page </title> </head> <body> <canvas id=myCanvas width=300 height=300 style="background-color: pink;"> </canvas> <script> var ctx = myCanvas.getContext("2d"); ctx.fillRect(10, 10, 20, 20); ctx.fillStyle= "red"; ctx.fillRect(50, 50, 20, 40); ctx.fillStyle= "green"; ctx.fillRect(60, 80, 70, 20); </script> </body> </html>