Drawing Arcs and Circles

Drawing arcs and circles

arc(x, y, radius, startAngle, endAngle, anticlockwise)

this method is used to create an arc on the path with center (x, y), specified radius, starting and ending angles in radians. The anticlockwise parameter is a boolean variable which if true, the arc is drawn in an anticlockwise direction and if false, the arc is drawn in a clockwise direction. This method is necessary when drawing perfect arcs such as rainbows and smiley faces.

startAngle and endAngle

The startAngle and endAngle are given in radians.

A radian is a unit of angle measure in which 1 radian is the angle subtended by an arc whose length is equal to the radius. For example, if the radius of an arc = 5cm and the length of the arc is 5cm, therefore the angle subtended at the centre of the arc is 1 radian. If the arc length is 10cm and the radius is 5cm, the angle is 2 radians.

  • 360° (the total angles at a point) = 2π radians.
  • 180° (angles on a straight line) = π radians.
  • 90° (right angle) = π/2 radians.

For example lets say we want to draw an arc of radius 80 at point (200;200) with startAngle of 1.2π and endAngle of 1.8π on canvas in a clockwise direction.



var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 10;
context.strokeStyle = "blue";
context.arc(200, 200, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();

Canvas Arc



Lets see how it works:

Angles start at 0π at the right of the circle and then move in a clockwise manner to π/2 or 90° , through π or 180° , then to 3
π/2 or 270° and then back to 0.

For the above example, we used 1.2π as the starting angle and 1.8π as the ending angle, which means that the starting angle is somewhere between π and 3π/2 and the ending angle is somewhere between 3π/2 and 2π as illustrated below:

Canvas angular coordinates

The arc was scribed from the mentioned startAngle to the mentioned endAngle in a clockwise direction because we passed false the anticlockwise parameter of the arc(x, y, radius, startAngle, endAngle, anticlockwise) method.

Now in the next example, lets set the anticlockwise parameter to true.



var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 10;
context.strokeStyle = "blue";
context.arc(200, 200, 80, 1.2 * Math.PI, 1.8 * Math.PI, true);
context.stroke();

Canvas arc



As you can see, the arc is drawn from the same points but this time in a clockwise direction.


You can even add a fill as follows:


var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 10;
context.strokeStyle = "blue";
context.arc(200, 200, 80, 1.2 * Math.PI, 1.8 * Math.PI, true);

context.fillStyle = "green";
context.fill();

context.stroke();

Canvas fill arc



arcTo(pointX1, pointY1, pointX2, pointY2, radius)

Another method for drawing arcs in canvas is the arcTo(pointX1,pointY1, pointX2, pointY2, radius) method. Here the resulting arc is defined by a control point (pointX1; pointY1), an ending point (pointX2; pointY2), and a radius. This method does not position an arc by its center point but by its context point, just like ths lineTo() method. This method is commonly used when creating rounded corners for paths or shapes.

An arc is added to the path with the specified radius and is tangent
to the line between the current point and (pointX1; pointY1), and also the line between (pointX1; pointY1) and (pointX2; pointY2).

If the specified a radius is 0, then this method just draws a straight line from the current point to (pointX1; pointY1).

For example in the code below, we are using the context.moveTo(100, 200); method to set our current point to (100;200) and the context.arcTo(300, 100, 500, 200, 0) method to set the control point (pointX1; pointY1) as (300;100), the ending point (pointX2; pointY2) as (500;200) and radius as 0. The result is a straight line from (100;200) to (300;100).



var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 5;
context.strokeStyle = "blue";
context.moveTo(100, 200);

context.arcTo(300, 100, 500, 200, 0);

context.stroke();

Canvas arcto



Otherwise if the radius is not zero it draws a straight line from the current point in the direction of (pointX1; pointY1) , then curves that line around in a circle until it is heading in the direction of (pointX2; pointY2).

In the next example, the only radius is changed to 100 and the result is now a straight line from the current point (100;200) in the direction of control point (300;100) and then an arc of radius 100 in the direction of ending point (500;200).



var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 5;
context.strokeStyle = "blue";
context.moveTo(100, 200);

context.arcTo(300, 100, 500, 200, 100);

context.stroke();

Canvas arcto


One point to note is that, the arc doesn’t end at the specified ending point but it just curves until its pointing in the direction of the ending point.

To see how useful this method is, lets add another line after the arc. Our line is going to start from the end of the arc to (500;200).



var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 5;
context.strokeStyle = "blue";
context.moveTo(100, 200);

context.arcTo(300, 100, 500, 200, 100);

context.lineTo(500, 200)

context.stroke();

Canvas arcto



Now we have a curved joint between two straight lines.

Drawing a circle

A circle is just an arc with a startAngle of 0 and an endAngle of 2π (360°), so we use


var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 5;
context.strokeStyle = "orange";

context.arc(200, 200, 80, 0 , 2 * Math.PI, false);

context.stroke();

To get:

Canvas circle