Images on the Canvas - HTML5 Canvas - page 150

We will also create two variables to define the current top-left corner for the window.
When we move on to the panning examples, we will modify these values to redraw the
image based on this location:
var windowX = 0;
var windowY = 0;
Drawing the Image Window
To draw the image window, we will simply modify the standard context.drawImage()
function 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
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
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
windowWidth
The width in pixels for the destination copy (this can be modified to scale the
image)
windowHeight
The height in pixels for the destination copy (this can be modified to scale the
image)
When we draw from the image to the canvas, we will be modifying the windowX and
windowY values to create a panning effect. Example 4-11 demonstrates how to get the
image onto the canvas with the window location set to 0 , 0 . Figure 4-12 shows an ex-
ample of the output for Example 4-11 .