html, css, jQuery, PHP, mySQL

« |

HTML5 Canvas and arcs of a circle: it’s a piece of Pi.

This post is for all those confused about the use of radians when drawing circles, and arcs of circles, using the new html5 canvas element. I hope to shed some light on the subject, and give you the knowledge that you need to make use of this exciting new capability.

Radians

The radian is a measurement which describes the ratio between the length of any arc of a circle and its radius. One radian is defined as the angle subtended when the length of the arc of a circle is equal to the radius of that circle. A radian is therefore a proportion, i.e. length of the arc / radius of the arc. The symbol for radians is rad.

We know that the circumference of a circle is given by the formula 2πr, where r is the radius of the circle, and that there are 360° in a circle. Therefore:

360° = 2πr/r = 2π

Therefore 1rad = (180/π)°

In order to convert radians to degrees, it is therefore a simple matter of multiplying by 180/π. Conversely, to convert degrees to radians, multiply by π/180.

This diagram shows the angles clockwise from the position to the right of the vertex, in radians. The angles are given in 15° increments, and the degree equivalents are shown for the EAST, SOUTH, WEST and NORTH directions. (Click for larger version).

 

radians

Angles of arc on a circle given in radians.

HTML5 Canvas: arc().

The javascript arc() function allows us to draw an arc of a circle in the canvas element. Its parameters are as follows:

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

Where x and y are the x and y co-ordinates of the centre of the circle. The angles are drawn clockwise from the EAST, which is 0 degrees, SOUTH is 90 degrees, WEST is 180 degrees and NORTH is 270 degrees. If anticlockwise is set to true then the directions are reversed: the arc is drawn in the opposite direction.

Of course the angles given in the arc() function must be in radians, not degrees. They must also use the correct JavaScript notation:

0 = EAST

Math.PI/2 = SOUTH

Math.PI = WEST

Math.PI*3/2 = NORTH

Note the form of the notation for NORTH. This is a good example, as it shows how π is first multiplied by 3 using the * operator, and then the result is divided by 2 using the / operator. Follow this example to draw arcs that subtend any angle given in radians.

Canvas: the context

But how do we use the canvas element? I will give a brief example where we can use the function explained above to draw slices of pie.

First add the html canvas element to your page: I have given it a size of 150px by 150px, but the default size is 300px by 150px. Make sure that you give your canvas element an id.

<canvas id=”canvas” width=”150″ height=”150″></canvas>

Now add the following code to the head of your html:
<script type=”application/javascript”>
function draw() {

//draw() will be called when the document loads
var canvas = document.getElementById(“canvas”);

//get the element with the id which you gave your canvas element: mine had id “canvas”
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);

//get the context: this is always an essential step. The context is then assigned to a variable.

ctx.beginPath();

//begin drawing a path

ctx.arc(75,75,50,0,Math.PI/2, false);

//change these parameters to alter the segment of circle drawn
//the first two parameters define the center of the circle
//the next defines the radius
//followed by the startAngle
//then the endAngle
//finally the direction in which the arc will be drawn (clockwise=false).
//if the last parameter is changed to true, the segment will be drawn anticlockwise

ctx.lineTo(75,75);

//draw a line to the center of the circle

ctx.closePath();

//draw a line back to the arc

ctx.stroke();

//stroke the path
}
}
</script>

Finally, add the following to the body of your html:

<body onload=”draw();”>

And there you have it! Have fun.

radians example

Tags: , , , , , , , , , , , , , , , , , , ,

This entry was posted on Monday, August 29th, 2011 at 11:06 am and is filed under HTML, JavaScript, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “HTML5 Canvas and arcs of a circle: it’s a piece of Pi.”

|
  1. Thanks for the great post. The best and easiest to understand write-up on the topic.

    Quick error check. In the following statement, shouldn’t South be 90° and North 270°?
    “The angles are drawn clockwise from the EAST, which is 0 degrees, SOUTH is 45 degrees, WEST is 180 degrees and NORTH is 345 degrees.”

  2. CyberTramp says:

    Thanks and well spotted. I don\’t know how that happened but I\’ll correct it as soon as possible!

  3. Gophung says:

    Thank you for the very interesting writings. You must be expert I suppose.

    I would like to ask question about how to use Visual Basic script instead of the Javascript. I think the VBScript is more powerful and easy to use than the Java language script.

    I worry too about how much power this algorithm will use in a battery powered device. I think much power because you code do not have the throttle function. Do you realise that too many calculations of PI fractions makes your CPU very hot. This make fan run hard and battery become empty very not slowly.

    Best to add a timer interval and do the PI arithmetic without heating the CPU too much.

|

Leave a Reply