Draw Arcs/Circle with Canvas: HTML5

Advertisement:

Today lets learn how to use arcs and paths to draw circle.

Arcs are curves that are portions of a circle. A full circle is a 360 degree arc!
A Path is a collection of some lines(or shapes) that once defined can be either filled or stroked.

index.html and myStyle.css files are kept same as illustrated in previous video tutorial: Canvas State: HTML5

Syntax
arc(x, y, r, sA, eA, TF);

arc method takes 6 parameters. x and y are the x-axis and y-axis, which is the center of the circle.
i.e., The x and y parameters determine where the center of the circle will be located on your canvas.

r is the radius of the circle, in pixels.
i.e., the distance of the curve from the center of the circle.

sA is start angle of the circle.
eA is the end angle of the circle.

TF is the direction – which can take 2 values i.e., True or False.

True: negative degrees, counter-clockwise direction.
False: positive degrees, clockwise direction.

Javascript file
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
window.onload = canvas;
 
function canvas()
{
	var myCanvas = document.getElementById("myCanvas");
 
	if( myCanvas && myCanvas.getContext("2d") ) 
	{
		var context         = myCanvas.getContext("2d");
 
		context.lineWidth= 6;
		context.beginPath();
 
		var degree = 270;
		var radian = ( Math.PI / 180 ) * degree;
 
		context.arc(100, 100, 50, 0, radian, false);
		context.strokeStyle= "red";
		context.fillStyle= "blue";
		context.stroke();
		context.fill();
		context.closePath();
 
	}
}

Degree to Radian

radians-and-degrees

We convert degrees to radians using a simple mathematical formula:
Radians = (PI / 180 ) * degree;

Draw Arcs/Circle with Canvas: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=vE0bstctkp4 [Watch the Video In Full Screen.]



Note:
1. By default, direction of drawing the arc is clockwise/positive degrees(i.e., the value of last parameter is false).
2. PI value is 180.
3. 2 * PI is 360!
4. arc method should be passed with radian values and not degrees.

1 thought on “Draw Arcs/Circle with Canvas: HTML5”

Leave a Reply

Your email address will not be published. Required fields are marked *