Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Drawing by using the element CHAPTER 12 477

ctx.closePath();

ctx.fill();

ctx.stroke();

ctx.beginPath();

ctx.moveTo(300, 250);

ctx.lineTo(350, 350);

ctx.lineTo(250, 350);

ctx.fill();

ctx.stroke();

ctx.beginPath();

ctx.moveTo(500, 250);

ctx.lineTo(500, 350);

ctx.moveTo(450, 300);

ctx.lineTo(550, 300)

ctx.fill();

ctx.stroke();

}

This example draws four shapes. The rendered output is shown in Figure 12-10.

FIGURE 12-10 endered shapes that are drawn by using the lineTo methodR

The first shape is a triangle. It’s created by drawing two lines and then calling the closePath

method, which draws a line from the end back to the start. The fill method is called to fill the

triangle with green. There is no outline because the stroke method was not called.