HTML and CSS Reference
Figure 2-38. no-repeat, repeat-x, and repeat-y in Chrome
Creating Shadows on Canvas Shapes
We can add shadows to shapes we draw on the canvas using four parameters. As with
the tiled fill patterns in the previous section, this feature has not been fully implemented
on all HTML5-compliant browsers.
We add a shadow by setting four Canvas properties:
The shadowOffsetX and shadowOffsetY values can be positive or negative. Negative val-
ues will create shadows to the left and top rather than to the bottom and right. The
shadowBlur property sets the size of the blurring effect on the shadow. None of these
three parameters is affected by the current Canvas transformation matrix. The shadow
Color can be any color set via HTML4 color constant string— rgb() or rgba() —or with
a string containing a hex value.
Example 2-27 and Figure 2-39 show a few different boxes drawn with various shadow