Drawing an Arc on a Canvas: Tutorial and Interactive Demonstration

The arc is the basis of many geometric shapes; it has a symmetrical shape and can be defined by two angles.

A combination of arcs can form shapes, such as on the right, where the orientation can change, but each fragment of the curve is an arc and is therefore symmetrical.
We would use curve methods to create unbalanced shapes.

The arc method depends on the position, radius, and two corners.

The arc function has six parameters:

1. Horizontal start point.
2. Vertical start point.
3. Radius.
4. Start angle. Specifies the start slope.
5. End angle. Defines the curvature.
6. Flag to reverse the rotation direction: false - clockwise, true - otherwise.

This gives the following syntax:

arc(x, y, radius, angleInitial, angleFinal, [true | false])

Example of an arc instruction:

context.arc(100,5, 70, Math.PI, 1,5 * Math.PI, true);

The x, y point can be the start of a new shape; in this case, the arc () call is preceded by beginPath. The arc can also be placed as an extension of a previously drawn shape, in which case it retrieves its attributes, and the position of the last point drawn is its starting position.

A simple demonstration...

The starting angle is 0 and the ending angle is PI. Radius - 70 pixels. The direction of rotation is false (clockwise).

Code:

context.arc(150, 5, 70, 0, Math.PI, false); 

Change the direction of rotation

The default direction is clockwise and false. You can reverse the direction using the optional sixth parameter.

If the sixth parameter is true, the arc is drawn counterclockwise.
Example above, but with reverse direction of rotation :

Code:

context.arc(150, 75, 70, 0, Math.PI, true);

To Define Arc Angles

The angle has a real value between 0 and 2 PI, which is expressed in JavaScript as 2 * Math.PI.
This last value corresponds to 360 ° (but the angle values are not expressed in degrees).
Take the example above with a starting PI angle and a ending PI angle twice :

Code:

context.arc(150, 75, 70, Math.PI, 2 * Math.PI, false);

And we find the previous arc again, because each time we have the angle complement from the first example.

Draw an arc on the left

When we draw clockwise, the semicircle has a starting angle of 0 and a ending angle of PI.
The circle goes from 0 to 2 PI.
To draw a semicircle to the left, we start with PI/2 and end with 1.5 times PI. Demonstration:

To draw the right arc, set the rotation direction to true or use an angle of 1.5 PI and 0.5 PI.

Draw an arc in an animation

To see how this works, in the animation we change the start angle and end angle from 0 to 2 * PI.

Angle start value and end value:

Demo code:

var angle = 0;
var delay; 

function drawAngle(ctxa)
{
 ctxa.arc(150, 50, 40, angle, angle);
 ctxa.stroke();
 angle+=0.1; 
if(angle > 2 * Math.PI) {clearInterval(delay);return;}
 document.getElementById("angle").value = Math.round(angle * 100)/100;
} 

function setAngle()
{
 angle=0;
 var canvas = document.getElementById("canvas4"); 
var ctxa = canvas.getContext("2d"); 
ctxa.lineWidth="3"; 
ctxa.beginPath(); 
delay = setInterval(function(){ drawAngle(ctxa); }, 100);
}
setAngle();

Interactive demonstration of the arc method

How to choose the starting and ending angle, how to give the direction of rotation, and the interaction between all these factors...
The best way to understand them is through an interactive demo.

Canvas tag

Max X: 400
Maximum Y: 200
Maximum angle: 2 PI = 6.29
Maximum radius: 200

Canvas requires a modern browser: Chrome, Firefox, IE9, Safari. Arc definition

Start angle End angle Rotation direction: true false

Coordinates x = y = Radius (0-100)

HTML code

<canvas id="canvasDemo" width="402" height="202" style="border:1px solid #CCC;background:white">
 Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.
</canvas>

JavaScript code

function setArc()
{
 var canvas = document.getElementById("canvasDemo"); 
 var context = canvas.getContext("2d");
 
 var x = document.getElementById("x").value;
 var y = document.getElementById("y").value;
 var radius = document.getElementById("radius").value;
 var initial = document.getElementById("startangle").value;
 var final = document.getElementById("endangle").value;
 if(document.getElementById("clock1").checked)
 clock = true;
 else 
 clock = false;
 context.beginPath();
 context.lineWidth="2";
 context.arc(x, y, radius, initial, final, clock)
 context.stroke();
}

function erase()
{
 var canvas = document.getElementById("canvasDemo"); 
 var context = canvas.getContext("2d");
 context.clearRect(0,0, canvas.width, canvas.height);
}

Next chapter: The arcTo method defines an arc with coordinates rather than an angle.