изменить изображения холста

Question

Мне нравится менять изображение холста (шапка и жакет)

вот код

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); };    
}

два изображения отображаются один над другим, но при этом 2 раза код с 2 новыми изображениями (); не выглядит хорошо для моих глаз! но я не знаю лучше .. пожалуйста, покажи мне свет

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); 
        };  
    }
}