HTML and CSS Reference
In-Depth Information
Creating Shadows on Canvas Shapes
We can add shadows to shapes we draw on the canvas by 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:
1.
shadowOffsetX
2.
shadowOffsetY
3.
shadowBlur
4.
shadowColor
The
shadowOffsetX
and
shadowOffsetY
values can be positive or negative. Negative values
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
shadowColor
property 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 set-
tings.
