Circle and arc

for (let i = 0; i < 40; i++) { context.beginPath(); context.arc(200, 150, i * 3, 0, i / 7); context.stroke(); }

Click here to (re)start the code

The Canvas Context has an 'arc' method that can be used to draw circles and arcs.
Its basic parameters are:

context.arc(x, y, radius, startAngle, endAngle);

x, y - coordinates of the arc's center

startAngle and endAngle are the beginning and ending (respecitvely) angles of the arc measured clockwise from the positive x-axis and expressed in radians.
If your math skills only include degrees but not radians, use the following conversion formula:

radians = 180/π*degrees

The mathematical constant π in JavaScript is 'Math.PI'.
A full circle (360 degrees) corresponds to 2π radians, so to draw a circle in the middle of the Canvas, you need:

context.beginPath();
context.arc(200, 150, 100, 0, 2 * Math.PI);
context.stroke();

The executable example in the textbox is only slightly more complicated: it has a loop which draws 40 arcs. They all have the same center, but the radius increases by 3 with each iteration.
The length of the arc also increases, so the ones in the middle are very short and the ones on the outside are longer, resulting in a shell-like shape.
Check out what happens when the startAngle changes at a different rate than the endAngle? replace [5] with:

  context.arc(200, 150, i * 3, i/3, i / 4);

How about we move the center at the same time?

  context.arc(20 + i * 4, 20 + i * 3, i * 3, i/3, i / 4);

Almost like a 3d tunnel!

Enjoy experimenting with various parameters!

Next exercise: Yin Yang
Back to main page