HTML5 Canvas рисует изображение, заданное для цикла, рисует только последний набор изображений итерации

Question

Я пытаюсь нарисовать изображение, используя загрузчик изображений внутри цикла for. Рисует все изображения только на последней итерации.

В консоли не отображается draw -> 0 или draw -> 1, просто отображается draw -> 2

Спасибо за любую помощь !!

Вот мой блок кода:

        // For every player run iteration
        var pos="";
        var iter="";
        for (var i = 0; i < item.length; ++i) {
            // Position for players on account screen

            if(i == 0){ pos = "61px"; iter = 0; console.log("pos 0 -> " + iter);}
            if(i == 1){ pos = "168px"; iter = 1; console.log("pos 1 -> " + iter);}
            if(i == 2){ pos = "275px"; iter = 2; console.log("pos 2 -> " + iter);}
            console.log(i);
            console.log("pos -> " + pos);
            console.log("iter -> " + iter);
            // Gets player name from string
            let player = item[i].match( /([A-Z])\w+/g );

            // Create player div for mouse interaction
            let player_el = $('<div class="cursor player" id="player'+ player +'"></div>');
            $("#can_wrapper").append(player_el);
            $("#player"+ player).css({"position": "absolute", "height": "50px", "width": "50px", "left": ""+ pos +"", "top": "271px", "cursor": "grab", "cursor": "-webkit-grab"});

            // Get player name for hover action
            let player_name_el = player;
            document.styleSheets[0].addRule('#player'+ player +':hover::after','content: "'+player_name_el+'";');

            /**
             * Promisify loading an image
             * @param {String} imagePath The web location of the image
             * @returns {Promise} A Promise that will resolve to an Image
             */
            function loadImage(imagePath) {
                return new Promise((resolve, reject) => {
                    let image = new Image();
                    image.addEventListener("load", () => {
                        resolve(image);
                    });
                    image.addEventListener("error", (err) => {
                        reject(err);
                    });
                    image.src = '../interface/images/body/' + imagePath;
                });
            }

            let imageSources = ['v1456.png', 'vbody0.png','vhead14.png','v1960.png','v578.png','v1221.png', 'v3063.png']; // url and order

            Promise
                .all(imageSources.map(ii => loadImage(ii)))
                .then((images) => {
                    images.forEach((image) => {
                        if (iter == 0) { ctx.drawImage(image, 60, 270); console.log("draw -> 0");}
                        if (iter == 1) { ctx.drawImage(image, 167, 270); console.log("draw -> 1");}
                        if (iter == 2) { ctx.drawImage(image, 274, 270); console.log("draw -> 2");}
                        console.log(iter);
                    });
                }).catch((err) => {
                    console.error(err);
                });
        }

Answer 1

Я бы порекомендовал переместить function loadImage за пределы цикла

Если вы используете let вместо var и перемещаете объявление pos и iter внутри цикла for, тогда оно должно работать

function loadImage(imagePath) {
    return new Promise((resolve, reject) => {
        let image = new Image();
        image.addEventListener("load", () => {
            resolve(image);
        });
        image.addEventListener("error", (err) => {
            reject(err);
        });
        image.src = '../interface/images/body/' + imagePath;
    });
}

for (let i = 0; i < item.length; ++i) {
    let pos="";
    let iter="";
    // rest of your code remains unchanged
}