change canvas images - image

Question

I like to change some canvas image (hat and jacket)
here is the code
document.ready = function() {
canvas = document.getElementById('canvasspace');
ctx = canvas.getContext('2d');
drawImage();
}
function drawImage(){
var tempimage = new Image();
tempimage.src = jackets_images[jacket_to_draw];
tempimage.onload = function (){ ctx.drawImage(tempimage, 0, 0); };
var tempimage2 = new Image();
tempimage2.src = hats_images[hat_to_draw];
tempimage2.onload = function (){ ctx.drawImage(tempimage2, 0, 0); };
}
the two image show up one over the other one, but making 2 time the code with 2 new Image(); does not seem fine to my eye ! but i dont know better.. please show me the light

Answer 1

var imageNames = new Array();
imageNames[0] = jackets_images[jacket_to_draw];
imageNames[1] = hats_images[hat_to_draw];
var drawnImages = new Array();
function drawImage(images) {
for (var i = 0; i < images.length; i++) {
drawnImages[i] = new Image();
drawnImages[i].src = images[i];
drawnImages[i].onload = function (){
var thisImg = drawnImages[i];
ctx.drawImage(thisImg, 0, 0);
};
}
}