Styjun

I am trying to draw an image using a image loader inside of a for loop. It draws all of the images on the last iteration only.

In the console it does't show the draw -> 0 or draw -> 1 it just shows the draw -> 2

Thanks for any help!!

Here is my code block:

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

I would recommend moving function loadImage outside the loop

If you use let instead of var and move the declaration of pos and iter inside the for loop, then it should work

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