[Luke7268]

As I'm scrolling pixel by pixel anyway I just gave up on the whole thing and decided to just start scrolling whether the source canvas' contents have been copied or not. In a worst-case-scenario, I miss two pixels or so, but this is not detectable by the human eye.

window.requestAnimFrame = (function(callback) {
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
	function(callback) {
		window.setTimeout(callback, 1000 / 60);
	};
})();
   
var heightcanvas = $heightcanvas;
var widthcanvas =  $widthcanvas;
var topleft = widthcanvas;
var numberofpics = $zoekfotosaantal;
var totalwidth = $totalwidth;

var imgsrc = new Array();
var widthpic = new Array();
var img = new Array();

imgsrc[0] = '$fotourl[0]';
widthpic[0] = $widthnew[0];
	
imgsrc[1] = '$fotourl[1]';
widthpic[1] = $widthnew[1];
	
imgsrc[2] = '$fotourl[2]';
widthpic[2] = $widthnew[2];
	
imgsrc[3] = '$fotourl[3]';
widthpic[3] = $widthnew[3];
	
imgsrc[4] = '$fotourl[4]';
widthpic[4] = $widthnew[4];

imgsrc[5] = '$fotourl[5]';
widthpic[5] = $widthnew[5];
	
imgsrc[6] = '$fotourl[6]';
widthpic[6] = $widthnew[6];
	
imgsrc[7] = '$fotourl[7]';
widthpic[7] = $widthnew[7];
	
imgsrc[8] = '$fotourl[8]';
widthpic[8] = $widthnew[8];

imgsrc[9] = '$fotourl[9]';
widthpic[9] = $widthnew[9];
	
var canvasdest = document.getElementById('myCanvasDest');
var contextdest = canvasdest.getContext('2d');
contextdest.fillStyle = '#000000'; 
contextdest.fillRect(0, 0, widthcanvas, heightcanvas);  

var canvassrc = document.getElementById('myCanvasSrc');
var contextsrc = canvassrc.getContext('2d');
contextsrc.fillStyle = '#000000'; 
contextsrc.fillRect(0, 0, totalwidth, heightcanvas);

var sourcepointer = 0;
var scrollpointer = 0;
var i = 0;

var loadPictureOnCanvas = function (index, url, sourcepointer, widthpic, heightcanvas) {
	img[index] = new Image();
	img[index].onload = function() {
 		contextsrc.drawImage(img[index], sourcepointer, 0, widthpic, heightcanvas);
	};
	img[index].src = url;
	// if (index==numberofpics-1) {
	// 	alert(index);
	// }
}

var scroll = function() {
	contextdest.drawImage(canvassrc, scrollpointer, 0, 1, heightcanvas, widthcanvas-1, 0, 1, heightcanvas);
	contextdest.drawImage(canvasdest, 1, 0, widthcanvas-1, heightcanvas, 0, 0, widthcanvas-1, heightcanvas);
	// alert('thenCopy');
	// request new frame
	requestAnimFrame(function() {
		scroll();
	});
	scrollpointer++;
	if (scrollpointer>totalwidth) {
		scrollpointer=0;
	}
}

var makeSourceCanvas = function() {
	for (i=0; i<numberofpics; i++) {
		loadPictureOnCanvas(i, imgsrc[i], sourcepointer, widthpic[i], heightcanvas);
		sourcepointer=sourcepointer+widthpic[i];
	}
	// alert('makeSource');
}

makeSourceCanvas();
scroll(); // I still have no idea to start this *after* makeSourceCanvas is completely finished

Still curious after a solution for starting the scroll *after* makeSourceCanvas is done...

See the script in action at www.japanology.nl (top left corner).