Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

464 CHAPTER 12 Drawing with HTML5

, i = 0;

for (i = 0; i < count; i++) {

ctx.fillRect(i * (offset + width) + offset, offset, width, height);

ctx.clearRect(i * (offset + width) + (clearOffset / 2) + offset,

offset + (clearOffset / 2) + pushDownOffset,

width - clearOffset, height - clearOffset)

ctx.strokeRect(i * (offset + width) + offset,

(2 * offset) + height, width, height);

}

}

In this example, the fillRect method is used to create four filled rectangles. Each of the

rectangles is spaced horizontally by the offset amount. Next, the clearRect method is used to

clear a rectangular area that is inside the filled-in area created by the fillRect method. Finally,

the strokeRect method is used to create a second row of rectangles, but these rectangles are

not filled in. The result is shown in Figure 12-1.

FIGURE 12-1 Drawing rectangles on the canvas

You can see that the drawing on the canvas does indeed require knowledge of JavaScript

and the canvas context object.