S2
jS
Learn
Create Your Own
Split Screen
Go to Live Site
Next Page
As usual with setting drawing styles on the canvas, changes effect everything you draw from that point on, until you change it again.
<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.fillStyle= "green"; ctx.fillRect(60, 80, 70, 20); ctx.lineWidth= 4; ctx.strokeStyle= "red"; ctx.strokeRect(50, 50, 20, 40); ctx.strokeRect(100, 90, 60, 20); ctx.strokeRect(100, 130, 60, 20); ctx.lineWidth= 1; ctx.strokeRect(100, 170, 60, 20); </script> </body> </html>