S2JS - Introduction to drawing on the canvas : fillStyle persistance

Once you set a fillStyle, everything you draw from that point on is filled with that style, until you change the style.

Look at the example and notice how once we set a fillStyle, it stays in effect until we change it.

If you haven't set a fillStyle, the default is black.

Try making one of the green lines blue.

<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.fillRect(80, 50, 20, 40); ctx.fillStyle= "green"; ctx.fillRect(30, 110, 90, 20); ctx.fillRect(30, 150, 90, 20); </script> </body> </html>