HTML and CSS Reference
contextNow.fillStyle = 'rgba(242, 208, 145, .6)';
If the drawing is added i rst, the image simply sits on top of it as though no i lter at all is used.
Now, with the added i lter, the image better i ts in with the page, as Figure 13-9 shows.
Figure 13-9: A fi ltered image blending in with the background.
Using Adobe Photoshop or some similar image-editing sot ware, you could've added the i lter
to the image and loaded the i ltered image with a standard <img> tag. However, using
canvas and HTML5, you can make the changes without any additional sot ware.
CREATING COMPLEX DRAWINGS WITH CANVAS
h e simpler shapes are rectangles, and they're terrii c for squares and rectangles, but you can
only do so much with boxes before you need some lines and curves. h is section looks at the
following complex drawing elements that are part of canvas. (h e context term refers to the
name of the rendering context object.)