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.