HTML and CSS Reference
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.
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.