Images on the Canvas - HTML5 Canvas - page 155

Keyboard input
Now we need to create a keyboard listener function. The following function seems to
work best in all browsers tested—it's certainly not the only keyboard event listener,
but it is tried and true throughout this topic:
document.onkeydown = function(e){
e = e?e:window.event;
}
This function utilizes the ternary operator . If the statement before
the ? is true , the statement following the ? is executed. If it is false , the
statement after the : is executed. This is a shorthand version of the clas-
sic if / else construct.
We will add a switch / case statement, combining all the functions we have put into the
previous zoom and pan examples, along with a new set of code for the y direction
panning that we have not implemented before. It is very similar to the x direction
panning: the left arrow key will pan the image to the left; the right arrow key will pan
the image to the right:
case 38:
//up
windowY-=10;
if (windowY<0){
windowY = 0;
}
break;
case 40:
//down
windowY+=10;
if (windowY>photo.height - windowHeight){
windowY = photo.height - windowHeight;
}
break;
case 37:
//left
windowX-=10;
if (windowX<0){
windowX = 0;
}
break;
case 39:
//right
windowX+=10;
if (windowX>photo.width - windowWidth){
windowX = photo.width - windowWidth;
}
break;