Images on the Canvas - HTML5 Canvas - page 156

We also need to add in two cases for the + and - keys to perform zoom in and zoom
out actions:
case 109:
//-
currentScale-=scaleIncrement;
if (currentScale<minScale){
currentScale = minScale;
}
break;
case 107:
//+
currentScale+=scaleIncrement;
if (currentScale>maxScale){
currentScale = maxScale;
}
When the user presses the + or - key, the currentScale variable is either incremented
or decremented by the scaleIncrement value. If the new value of currentScale is greater
than maxScale or lower than minScale , we set it to maxScale or minScale , respectively.
Example 4-15 puts this entire application together. It doesn't take many lines of code
to create the simple interactions.
Example 4-15. Image pan and zoom application
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;
var currentScale = .5;
var minScale = .2
var maxScale = 3;
var scaleIncrement = .1;
function eventPhotoLoaded() {
startUp();
}
function drawScreen(){
//draw a background so we can see the Canvas edges
context.fillStyle = "#ffffff";
context.fillRect(0,0,500,500);