HTML5 Guidelines for Web Developers

(coco) #1

140 Chapter 5—Canvas


Figure 5.25 Yosemite National Park postcard

The first drawImage() call returns again the top-left quarter of Taft Point; the sec-
ond extracts the area of El Capitan and draws it as icon into the top-right corner.
Text with shadows completes the rudimentary layout of our postcard.
If you would rather have El Capitan in the foreground and Taft Point as a stamp
at the top right, you just need to slightly modify the drawImage() calls. In our ex-
ample you can do this by clicking on the canvas:

canvas.onclick = function() {
context.drawImage(
image,600,250,600,400,0,0,600,400
);
context.drawImage(
image,0,0,500,625,390,10,200,250
);
};

This yields the image shown in Figure 5.26.
Free download pdf