Peter Lubbers - Pro HTML 5 Programming

Figure 2-17. Background pattern-filled text
Applying Shadows
CHAPTER 2 ■ USING THE HTML5 CANVAS API
Finally, we will use the built-in canvas shadow API to add a blurred shadow effect to our new text
display. Like many graphical effects, shadows are best applied in moderation, even though the HTML5
Canvas API allows you to apply shadows to any operation we have already covered.
Once again, shadows are controlled by a few global context properties, as shown in Table 2-4.
Table 2-4. Shadow properties
Property Values Note
shadowColor Any CSS color Can include an alpha component
shadowOffsetX Pixel count Positive values move shadow to the right, negative left
shadowOffsetY Pixel count Positive values move shadow down, negative up
shadowBlur Gaussian blur Higher values cause blurrier shadow edges
55