S2JS - Introduction to drawing on the canvas : Changing the drawing order

Here they are - the same lines of code, but presented in a different order.

Click 'Prev' and 'Next' until you understand the difference.

Try your own changes, like moving the black square so it overlaps in front of the intersection of the red and green, then change again so it overlaps behind.

<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= "green"; ctx.fillRect(60, 80, 70, 20); ctx.fillStyle= "red"; ctx.fillRect(50, 50, 20, 40); </script> </body> </html>