HTML5 Guidelines for Web Developers

160 Chapter 5—Canvas

or rotated. The same goes for putImageData(imagedata,0,0), where the top-left

corner serves as an anchor point for applying the content of imagedata.

Let’s move on to the example where we will apply all mentioned transformation

methods. Figure 5.37 shows the appealing result—a collage of three image sec-

tions of our Yosemite picture with mirror effect in pseudo-3D.

Figure 5.37 Photo collage with mirror effect in pseudo-3D

Let’s start by punching out the three square sections for Taft Point, Merced River,

and El Capitan. The result will be saved in the array icons:

var icons = [

clipIcon(image,0,100,600,600),

clipIcon(image,620,615,180,180),

clipIcon(image,550,310,400,4];

The function clipIcon() takes care of clipping and adapting the size of the dif-

ferently sized image portions. In this function, we first create a new in-memory

canvas with a size of 320 × 320 pixels, onto which we then copy the appro-

priately reduced (or enlarged) icon with drawImage() before adding a 15-pixel

white border: