Circles and Arcs

# Circles and Arcs

Note that a circle is just an arc that keeps going around until it gets to its starting point.

Circles and arcs are created by identifying the center of the circle (x,y) and then choosing a radius. You then set the starting and ending points on the circle and indicate whether to connect them going clockwise or counter-clockwise. The method looks like this:

Let's break this apart. Imagine the following circle:

1. Identify the center point:
2. Choose a radius (e.g., 40). We draw the radius directly out to the right. Its end marks the 0 degree/radians point of the circle/arc:
3. Choose a starting point along the (usually 0) and an ending point (e.g., 90 degrees). The sixth and final argument indicates whether you want to connect these two points by moving along the circle counter-clockwise (true) or clockwise (false). The first image below shows the counter-clockwise result and the second shows the clockwise result:

The code for creating the above graphics is shown below:

## Code Sample:

html5-canvas/Demos/arc-explained.html
```<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
var canvas=document.getElementById("my-canvas");
if (canvas.getContext) {
context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50,50);
context.fillStyle="rgba(255,0,0,.1)";
context.fill();
}
}, false);

function centerPoint() {
var canvas=document.getElementById("my-canvas");
if (canvas.getContext) {
context.fillStyle="rgba(0,0,0,1)";
context = canvas.getContext("2d");
context.beginPath();
context.fill();
}
}

var canvas=document.getElementById("my-canvas");
if (canvas.getContext) {
context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50,50);
context.lineTo(50+40,50);
context.stroke();
}
}

function showArc(ccw) {
var canvas=document.getElementById("my-canvas");
if (canvas.getContext) {
context = canvas.getContext("2d");
context.beginPath();
context.stroke();
}
}

return (Math.PI/180)*degrees;
}
---- C O D E   O M I T T E D ----

```

Usually when we (meaning most humans) think of angles, we think in terms of degrees (e.g., a 90-degree angle). Others (meaning some math folks, including the people behind canvas) think in terms of radians. So, the fourth and fifth arguments of the arc() method are not in degrees, but in radians.

• A full circle is 2 radians, which is the same as 360 degrees.
• A semi-circle is radians, or 180 degrees.
• A quarter-circle is /2 radians, or 90 degrees.

For those of you who would prefer to continue to think in degrees, you can use this simple conversion function:

function degreesToRadians(degrees) { return (Math.PI/180)*degrees; }

Without the degreesToRadians() function, a circle could be created like this:

context.arc(100,100,50,0,2*Math.PI,true);

Using the function, you would create the same circle like this: