Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

486 CHAPTER 12 Drawing with HTML5

ctx.fill();

ctx.stroke();

}

In this example, the center of the circle is 400, 300, which is the middle of the canvas. The

radius is set to 100. The starting location must be a value between 0 and 6.283185, which is

2 * PI. The ending location must also be a value between 0 and 6.283185. The values 0 and

6.283185 can be used to represent the farthest right-side point of the circle. The value of

3.14159 (PI) is the farthest left-side point of the circle. The uppermost point of the circle is 1.5

* PI, while the lowermost point of the circle is .5 * PI. The rendered canvas is shown in Figure

12-16. The rendered circle has a blue outline and yellow fill.

FIGURE 12-16 Creating a circle by using the arc method

To draw an arc that represents part of the circle, you need valid start and end locations,

and you need to consider the optional direction parameter. By default, the stroke is rendered

clockwise, which means that the direction is set to false. Consider the following example, in

which you provide a start location of 0 and an end location of 1.5 * PI.

function drawArc() {

var canvas = document.getElementById('myCanvas')

, ctx = canvas.getContext('2d');