Peter Lubbers - Pro HTML 5 Programming

Figure 2-7. Stylish stroked tree canopy
Working with Fill Styles
CHAPTER 2 ■ USING THE HTML5 CANVAS API
As you might expect, stroking is not the only way to affect the appearance of canvas shapes. The next
common way to modify a shape is to specify how its paths and subpaths are filled. Listing 2-11 shows
how simple it is to fill our canopy with a pleasant, green color.
Listing 2-11. Using a fill style
// Set the fill color to green and fill the canopy
context.fillStyle = '#339900';
context.fill();
First, we set the fillStyle to the appropriate color. As we will see later, it is also possible to set the
fill to be a gradient or an image pattern. Then, we simply call the context’s fill function to let the canvas
fill all the pixels inside all the closed paths of our current shape, as shown in Figure 2-8.
39