Images on the Canvas - HTML5 Canvas - page 152

Panning the Image
To pan the window across the image, we simply need to modify the windowX and
windowY coordinates. In Example 4-12 , we will modify the windowX coordinate inside a
frame tick interval. During each loop iteration, we will increase the value of windowX by
10 . We need to be careful not to go off the far right side of the image, so we will subtract
the windowWidth from the image.width , and use the result as the maximum windowX
position:
windowX+ = 10;
if (windowX>photo.width - windowWidth){
windowX = photo.width - windowWidth;
}
Example 4-12 contains the changes necessary to perform this panning operation.
Example 4-12. Simple image panning
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,windowHeight);
windowX += 10;
if (windowX>photo.width - windowWidth){
windowX = photo.width - windowWidth;
}
}
function startUp(){
setInterval(drawScreen, 100 );
}
When you test Example 4-12 , you will see the window pan across the image and stop
at the rightmost edge. Next, we will start to implement zooming into this simple
example.