HTML and CSS Reference
In-Depth Information
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:
•
shadowOffsetX
•
shadowOffsetY
•
shadowBlur
•
shadowColor
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
settings.
