S2JS - Introduction to drawing on the canvas : Circles

Circles are a bit different.

Whereas rectangles are positioned by their top-left corner, circles are positioned by their centre
Rectangles are sized by their width and height, but circles are sized by their radius
Circles include some additional parameters (numbers in the parenthesis) that let you just draw portions (or arcs) of circles.
There's some other weird syntax.

Look at the example.

<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(); // Start drawing something ctx.arc(150, 150, 50, 0, Math.PI * 2); // Make it a circle ctx.stroke(); // Outline an outline </script> </body> </html>