Images on the Canvas - HTML5 Canvas - page 154

Example 4-14. Pan an image with a preset zoom amount
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*2,windowHeight*2);
windowX += 10;
if (windowX>photo.width - windowWidth){
windowX = photo.width - windowWidth;
}
}
function startUp(){
setInterval(drawScreen, 100 );
}
Application: Controlled Pan and Zoom
Our final example for this section will be a simple application allowing the user to zoom
and pan a photo.
The zoom scale
We are going to create a set of variables to handle the current zoom scale, the factor by
which the zoom scale is increased or decreased, as well as the maximum and minimum
zoom values:
var currentScale = .5;
var minScale = .2
var maxScale = 3;
var scaleIncrement = .1;
We will apply these values to the drawImage() function:
context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
0,0,windowWidth*currentScale,windowHeight*currentScale);