[Luke7268]

This guy nails it down... http://www.impressivewebs.com/callba...ns-javascript/

The first proper explanation about callback I see on the web that can actually be understood by stupid beginners like me. I have finally seen the light.

After that, solving the problem was pretty easy:

<script>
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);
	if (index==9) {
		copyCanvas();
	}
};
img[index].src = url;
alert(index);
}

var copyCanvas = function() {
contextdest.drawImage(canvassrc, 0, 0, widthcanvas, heightcanvas, 0, 0, widthcanvas, heightcanvas);
alert('thenCopy');
}

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

makeSourceCanvas();

</script>

The magic happens in loadPictureOnCanvas, specifically within the onload method.