Drawing an arc in Canvas: Tutorial and interactive demo

The arc is the basis for many geometric figures, it has a symmetrical shape and may be defined from two angles.

Simple plot, elaborate uses

Methods of curves will be used to achieve non-symmetrical figures, while a combination of arcs can form such a figure as that on the right where the orientation may vary but in which each curve fragment is an arc and therefore is symmetric.

The arc method depends on a position, a radius and two angles

The arc function has six parameters:

1. The starting point horizontally.
2. The vertical starting point.
3. The radius.
4. The starting angle. Determines the initial inclination.
5. The ending angle. Determines the curvature.
6. A flag to reverse the direction of rotation: false sense of clockwise, true otherwise.

This gives the following syntax:

``arc(x, y, radius, startingangle, endingangle,  [true | false])``

Example of arc instruction:

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

The point x, y can be the beginning of a new figure, in this case the beginPath method is called befor arc(). The arc can also be seen as an extension of a figure already drawn, then it retrieves the attributes of it and the position of the last drawn dot is its starting position.

A simple demo...

The starting angle is 0 and the final angle is PI. The radius is 70 pixels. The rotation direction is false (clock-wise):

The code:

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

Changing the direction of rotation

By default the rotation is clock-watch and it is false. We can reverse the direction with an optional sixth parameter.

If we give a true sixth parameter, the arc will be drawn in the opposite direction, counterclockwise.
Example as above but with a direction of rotation reversed:

Code:

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

How to define angles of the arc

The angle has a real value ranging from 0 to 2 times PI, that is expressed in JavaScript by 2 * Math.PI.
The latter value corresponds to 360 ° (but the angle values ​​are not expressed in degrees).
The above example with initial angle of PI and final double PI:

Code:

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

And we face the previous arc as we have in each case the complement of the angle of the first example.

Making a arc to the left

When we trace in the direction of the clock, a semicircle has a starting of 0 and a ending angle of PI.
A circle is 0 to 2 times PI.
To draw a semicircle on the left, so we start to PI / 2 and ends at 1.5 times PI. Proof:

To draw an arc on the right, is assigned the value true to the parameter in the direction of rotation or we take the values ​​of angles of 1.5 IP and 0.5 IP.

Arc in motion

To see how this works, you go into an animation to vary the starting angle and the final angle from 0 to 2*PI.

Value of initial and final angle:

Code of the demonstration:

``````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

How to choose a starting and ending angle, how to choose a sense of rotation, and the interaction between all these factors...
The best way to understand them is an interactive demonstration .

The Canvas tag
X max: 400
Y max: 200
Angle max: 2 PI = 6,29
Radius max: 200
Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.
Defining an arc

Starting angle Ending angle Rotating direction: true false

Coordinates x= y= Radius (0-100)

The 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>``````

The JavaScript code:

``````function setArcDemo(){  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 from coordinates rather than an angle.