Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Drawing by using the element CHAPTER 12 483

ctx.lineWidth = 1;

ctx.beginPath();

ctx.moveTo(300, 200);

ctx.lineTo(400, 500);

ctx.lineTo(600, 300);

ctx.stroke();

ctx.strokeStyle = 'black';

ctx.lineWidth = 5;

ctx.beginPath();

ctx.moveTo(300, 200);

ctx.arcTo(400, 500, 600, 300, 50);

ctx.stroke();

}

In this example, the lines are drawn to depict the lines from the previous example. The

lines are gray, and lineWidth is set to 1. The arc is drawn by using the arcTo method. This

starting point is 300, 200, the second point is 400, 500, and the last point is 600, 300. The

radius is set to 50. The rendered output is shown in Figure 12-14.

FIGURE 12-14 he rendered arc when the radius is set to 50T