Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Drawing by using the element CHAPTER 12 487

ctx.strokeStyle = 'blue';

ctx.fillStyle = 'yellow';

ctx.lineWidth = 5;

ctx.beginPath();

ctx.arc(400, 300, 100, 0, 1.5 * Math.PI);

ctx.fill();

ctx.stroke();

}

The rendered arc is shown in Figure 12-17, which shows that three-quarters of the circle is

rendered. Is that what you wanted or expected? If you want to render only the quarter of the

circle that is missing, you have two possible solutions.

FIGURE 12-17 he rendered arc displaying three-quarters of the circleT

One solution is to set the start location to 1.5 * Math.PI and the end location to 0. Because

the rendering renders the stroke clockwise, the arc will start rendering at the uppermost

point of the circle and stop at the rightmost point of the circle.

The other solution is to leave the start at 0 and the end at 1.5 * Math.PI but add the

optional direction parameter, passing in a value of true. This causes the stroke rendering to go

counterclockwise, which renders the quarter circle.