S2JS - Introduction to drawing on the canvas : Circle parameters

The meaning of the parameters (the numbers in the brackets) are:

The x and y position of the centre
The radius (size) of the circle
The last two numbers indicate how much of the circle to draw. Don't worry about it for now, but for a full circle you'll need to use the values shown.

That's why this method is called "arc" instead of "circle" -- because it lets you draw portions of circles as well as entire circles, even though mostly people want to draw entire circles.

Here's an example where we draw circles of various radii on the same centre.

<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(150, 150, 50, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(150, 150, 25, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(150, 150, 100, 0, Math.PI * 2); ctx.stroke(); </script> </body> </html>