Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Drawing by using the element CHAPTER 12 485

FIGURE 12-15 Changing the radius changes the arc dramatically

Drawing arcs by using the arc method

The arc method is much simpler to use than the arcTo method. The arc method can be used

to draw a circle or any part of a circle. This is different from the behavior of the arcTo method,

which cannot draw more than half a circle and might produce lines with the arc in an effort to

continue a path without breaking the stroke.

The arc method accepts x and y coordinates as the center of the circle used to draw the

arc, followed by the radius of the circle that the arc will use, followed by the starting angle

and the ending angle. You can add a direction parameter that indicates the direction of the

arc. The following example code shows how to create a circle by using the arc method.

function drawArc() {

var canvas = document.getElementById('myCanvas')

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

ctx.strokeStyle = 'blue';

ctx.fillStyle = 'yellow';

ctx.lineWidth = 5;

ctx.beginPath();

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