Each image in the array is superimposed on one another to form the final picture. However, a problem arises when all the images are loaded - the loop continues to run making it extremely difficult to scroll or execute any other animations.
function map(id){
var img_elem = document.getElementById("img_elem");
var ctx = document.getElementById('canvas').getContext('2d');
var name = <?php echo json_encode($sorted_array);?>;
var elements=<?php echo $filecount?>;
var image= [];
for(i=0;i<elements;i++){
image[i]= new Image();
image[i].src = "images/"+name[i];
image[i].setAttribute("class","container");
image[i].setAttribute("style","position:absolute");
ctx.drawImage(image[i],1,1);
alert(image[i].src);
}
}