HTML and CSS Reference
In-Depth Information
Figure 13-16: A circle with gradient fi ll.
281
h ere's far more that you can do with canvas, and one of the best features of images created
using canvas DOM objects is that they aren't as expensive (they don't take as much band-
width) to load as bitmapped graphic i les. We've only skimmed the surface of this new
powerful element in HTML5.
TAKE THE WHEEL
Working with
canvas
is so much fun and varied that it's hard to know where to begin. So,
try the following little projects to test-drive this great new element in HTML5:
In Figure 13-13, you see two line objects — a briefcase and a house. See if you can draw
the house using the methods employed for creating the briefcase.
Take an image of a picture frame, and superimpose another image that appears to be in
the frame. (h is project requires you to i x the frame and image sizes so that one will i t
in the other.)
Find or create a digital photo and superimpose a sunset on top of it. (Alternatively, create
an image with another kind of gradient and superimpose it on a digital photo or other
image. What about a gradient i lter?)
