THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 263

Figure 13-8: Image and drop shadow with <canvas> .
© David Sanders

267

Working with fi lters
Before moving on to complex shapes, let's take a look at using i lters to add tints to images.
h e Internet is a huge library of copyright-free photos and drawings; use your favorite search
engine to do an image search. (But remember that not every photo you i nd online is copy-
right-free — be sure you have permission to use any image you i nd.) Many of the drawings
are in black-and-white and can be a stark contrast to other elements of a page. One way to
integrate them is to add a i lter, which you can easily do by creating a partially transparent
colored shape and place on top of the image. Using canvas , this process is quite easy. h e
key to the process is the following line:

context.fillStyle = 'rgba(rn, gn, bn, alpha)';

Instead of using a hexadecimal value, it uses RGB with an “alpha” channel — rgba() — that
controls for transparency. h e last parameter is a value between 0 and 1. h e higher the value,
the more opaque the image will be. By using a value less than 1, you can control the degree of
opacity. h e rest of the shape matches the dimensions of the image and is positioned in the
same space.

To integrate an image with the rest of the page — the plan is to add a color tint using the
background color. h e following program ( FilterImage.html in this chapter's folder at