Circles and Arcs

Contact Us or call 1-877-932-8228
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:

arc(x,y,radius,startDegree,endDegree,counterclockwise);

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

  1. Identify the center point: Circle with 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: Circle with Radius
  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: Counter-Clockwise Arc Clockwise Arc

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 ----
window.addEventListener("load",function() {	
	var canvas=document.getElementById("my-canvas");
	if (canvas.getContext) {
		context = canvas.getContext("2d");
		context.beginPath();
		context.moveTo(50,50);
		context.arc(50,50,40,0,degreesToRadians(360),true);
		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.arc(50,50,2,0,degreesToRadians(360),true);
		context.fill();
	}
}

function radius() {
	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.arc(50,50,40,0,degreesToRadians(90),ccw);
		context.stroke();
	}
}

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

Radians

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 2Pi radians, which is the same as 360 degrees.
  • A semi-circle is Pi radians, or 180 degrees.
  • A quarter-circle is Pi/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:

context.arc(100,100,50,0,degreesToRadians(360),true);

To get a better understanding of radians and degrees and how the counterclockwise parameter works, open html5-canvas/Demos/arc-radians.html and html5-canvas/Demos/arc-degrees.html in your browser.

Next