HTML5 Guidelines for Web Developers

(coco) #1
5.7 Embedding Images 139

Figure 5.24 Taft Point with El Capitan in Yosemite National Park


In contrast to the two previous variations of drawImage(), which could have been
realized with CSS as well, the third variation offers completely new possibilities
of working with images. We can now copy any section of the source image (sx, sy,
sw, sh) into the defined area of the target canvas (dx, dy, dw, dh). So nothing stands
in the way of image montage:


image.onload = function() {
context.drawImage(image,0,0);
context.drawImage(
image, 620,300,300,375,390,10,200,250
);
};


The result is shown in Figure 5.25.

Free download pdf