HTML5- Canvas' arc( ) Method (Explained)

In this blog post, I've explained the arc() method of the HTML5's canvas feature. Well, I decided to do this because I was going to build a little drawing app using HTML5's canvas as a tutorial series. However, I realized that it was nearly impossible to explain the meat of the series without understanding the arc() function properly, hence I decided to do a standalone tutorial on arc() method...

Introduction to radians

Now, before we even talk about the arc() function, we have to understand the concept of radians. We know that there are many units for distance right? kilometers, miles, light years. Even for time, we have units like seconds, minutes, hours, days, weeks, months, years, decades, centuries etc.

Same way, for angles, we have units like degrees (the most popular one), grades, turns and radians (the standard one).

Radians visual demo

Now if you draw a semicircle, it has 180 degrees. This is equal to 200 grades, or ½ turns, or π radians. Therefore, 360 degrees are equal to 400 grades, 1 turn or 2π radians...

The technical definition: One radian is the angle subtended by an arc that has the same arc length as the radius of the circle that it belongs to.

Back to the arc( ) method

Now, that we know what a radian is, we can safely learn about the arc() method.

arc method- Browser Support

Well, all the major browsers (except IE8 and previous versions) support the arc method of HTML5.

arc method- Syntax

Here's the syntax for the arc method:

context.arc(x, y, radius, start, end, [anticlockwise]);

arc method- Parameter Explanation

• x- The x-coordinate of the circle's center
• y- The y-coordinate of the circle's center
• radius- The radius of the circle's center
• start- The angle at which the arc should start
• end- The angle at which the arc should end
• anticlockwise- This is optional. By default, the angles go clockwise where the 3 o'clock position is 0^c (the superscript "c" indicates "radians"). By specifying anticlockwise=true, we tell the browser to go anticlockwise...