I want to replace the photo to photo2 after the panning is done.

window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {

canvasApp();

}

function canvasSupport () {
return Modernizr.canvas;
}

function canvasApp(){



var photo = new Image();
var photo2 = new Image();
photo.addEventListener('load', startUp , false);


photo.addEventListener('load', buildUp , false);

photo.src = "page2a.png";
photo2.src="page1.png" ;

var windowWidth = 800;
var windowHeight = 500;

var windowX = 0;
var windowY = 0;
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");


function drawScreen() {

context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
0,0,windowWidth*.9,windowHeight*.9);

windowY += 40;
if (windowY>photo.height - windowHeight){
windowY = photo.height - windowHeight;
clearInterval(timer) ;
}



}
function startUp(){

var timer=setInterval(drawScreen, 100 );
clearInterval(timer) ;
}


function buildUp(){

setInterval(drawBox, 1000);

}

function drawBox() {

context.drawImage(photo2, windowX, windowY, windowWidth, windowHeight,
0,0,windowWidth*.9,windowHeight*.9);
context.moveTo(0,0);
context.lineTo(500,600);
context.stroke();




}


}