HTML5 Guidelines for Web Developers

152 Chapter 5—Canvas

Figure 5.32 Compositing operation “lighter” with 16 base colors

We will encounter the compositing operator destination-out once more in the

mirror effect in Figure 5.37 in section 5.11, Transformations. Let’s first turn to

user-defined patterns in Canvas.

5.10 Patterns

To create user-defined patterns for fills and lines, the specification offers the

method createPattern(). Similar to drawImage(), it accepts both image elements

and canvas or video elements as input, defining the type of pattern repetition in

the parameter repetition:

context.createPattern(image, repetition)

Permitted values of the repetition argument are, as with the CSS specification’s

background-color attribute, repeat, repeat-x, repeat-y, and no-repeat. If we

again use the 16 named basic colors, we can use a few lines of code to create

checkered patterns, each with two pairs of colors (see Figure 5.33).