S2JS - Introduction to drawing on the canvas : Filled circles

To draw an outline of a circle, we've been using stroke.

To change the colour of the outline, we set the strokeStyle.

To draw a filled circle, we use fill instead of stroke.

And to change the colour of the filled circle, we set the fillStyle.

Challenge: Try making the filled circle blue, and make the lineWidth of the red circle 20.

<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.beginPath(); ctx.arc(200, 200, 50, 0, Math.PI * 2); ctx.strokeStyle= "red"; ctx.stroke(); ctx.beginPath(); ctx.arc(200, 200, 25, 0, Math.PI * 2); ctx.fillStyle= "green"; ctx.fill(); </script> </body> </html>