Images on the Canvas - HTML5 Canvas - page 264

Drawing the Image Window

Todrawtheimagewindow,wewillsimplymodifythestandard context.drawImage() func-
tion call using the values in the four variables we just defined:

context . drawImage ( photo , windowX , windowY , windowWidth , windowHeight , 0 , 0 ,
windowWidth , windowHeight );

Let's take a closer look at this for a refresher on how the drawImage() function operates. The
values are passed in order:

photo photo

The image instance we are going to use as our source for painting onto the canvas

windowX

The top-left x location to start copying from the source image

windowY

The top-left y location to start copying from the source image

windowWidth

The width of the rectangle to start copying from the source image

windowHeight windowHeight

The height of the rectangle to start copying from the source image

0

The top-left x destination location for the image on the canvas

0

The top-left y destination location for the image on the canvas

viewPortWidth viewPortWidth

The width in pixels for the destination copy (can be modified to scale the image)

viewPortHeight

The height in pixels for the destination copy (can be modified to scale the image)

Whenwedrawfromtheimagetothecanvas,wewillbemodifyingthe windowX and windowY
values to create a panning effect. Example 4-11 demonstrates how to get the image onto the