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