HTML and CSS Reference
In-Depth Information
contextNow.drawImage(pic,0,0);
contextNow.fillStyle = 'rgba(242, 208, 145, .6)';
contextNow.fillRect(0,0,472,306);
contextNow.fill();
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.
269
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.)
