HTML and CSS Reference
In-Depth Information
from the source image that needs to be drawn on the canvas. The last four parameters have the same
significance as in the previous example. Figure 4-15 shows how part of the image is drawn on the canvas.
Figure 4-15.
Image cropping using the
drawImage()
method
As you can see, the HTML5 logo has been cropped such that only the text
HTML
is drawn on the
canvas. Just like the previous variation of the drawImage() method, here too there can be distortion of the
resultant image if the width and height proportions are not maintained.
Adding Special Effects
The canvas methods you've learned about so far allow you to render plain graphics. However, you can also
add fancy and eye-catching effects to the graphics such as shadows, transparency, gradient fills, and
pattern fills. In this section, you learn how.
To add special effects, you set certain properties of the drawing context and then call
stroke()
or
fill().
. Let's see how this is done with some examples.
Shadows
A common effect used while drawing graphics on a canvas is a shadow. You can add shadows to lines,
curves, shapes, and text using four core properties of the drawing context object
:
shadowColor
,
shadowBlur
,
shadowOffsetX
, and
shadowOffsetY
.
The
shadowColor
property indicates the color of the shadow. The
shadowBlur
property is a numeric
property and configures the blurriness of the shadow. The lower the
shadowBlur
value, the sharper the
shadow. For example, setting
shadowBlur
to
10
adds more blurriness to the shadow than a value of
5
. The
shadowOffsetX
and
shadowOffsetY
properties allow you to control the positioning of the shadow. These x
and y coordinates are relative to the target graphic object displaying the shadow. For example, if you set
the
shadowOffsetX
and
shadowOffsetY
properties to 5 pixels, then the shadow is drawn 5 pixels to the right
and 5 pixels down from the target graphic. You can also supply
shadowOffsetX
and
shadowOffsetY
properties as negative numbers to shift the shadow in the opposite direction (left and up).
Listing 4-14 adds shadows to a rectangle and text using the shadow properties discussed.
