Images on the Canvas - HTML5 Canvas - page 153

Zoom and Pan the Image
To zoom in or out of an image, we need to change the final width and height values of
the drawImage() function. Let's examine how we would zoom out to 50% of the original
size of the image while panning at the same time. The drawImage() function will look
like this:
context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
0, 0, windowWidth*.5,windowHeight*.5);
Example 4-13 modifies Example 4-12 and adds in the 50% zoom.
Example 4-13. Pan an image with a preset zoom out
var photo = new Image();
photo.addEventListener('load', eventPhotoLoaded , false);
photo.src = "butterfly.jpg";
var windowWidth = 500;
var windowHeight = 500;
var windowX = 0;
var windowY = 0;
function eventPhotoLoaded() {
startUp();
}
function drawScreen(){
context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
0,0,windowWidth*.5,windowHeight*.5);
windowX += 10;
if (windowX>photo.width - windowWidth){
windowX = photo.width - windowWidth;
}
}
function startUp(){
setInterval(drawScreen, 100 );
}
When we test this example, we will see that when zoomed out, the image on the canvas
is 50% of its original size. To zoom in, we simply change the scale factor from .5 to a
number greater than 1 :
context.drawImage(photo, windowX, windowY, windowWidth,windowHeight,
0,0,windowWidth*2,windowHeight*2);
Example 4-14 changes this single line from Example 4-13 to zoom in rather than zoom
out.