Why doesn't canvas accept dynamic src's?

Question

JavaScript

Why canvas doesn't accept dynamic src, there is code like this

var canvas = document.getElementById("myCanvas"), 
                context = canvas.getContext("2d");
                 contextT = canvas.getContext("2d");
      var img = new Image();
      var imgflag_1 = new Image();
    var imgflag_2 = new Image();
    var imgflag_3 = new Image();
    var imgflag_4 = new Image();
    var imgUSER = new Image();
      var loaded = 0;
      img.src = "img/testimage.png";

    var testingURL = "minCountry/"+arr[a[0]]+".png";
           imgflag_1.src = testingURL; 
    console.log("link   "+testingURL); // тут выводится как надо, но фото не отображается на холсте 
          
    imgflag_2.src = "minCountry/American.png";
    imgflag_3.src = "minCountry/American.png";
    imgflag_4.src = "minCountry/American.png";
    imgUSER.src = "img-user.jpg";
      imgflag_1.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
          imgflag_2.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
          imgflag_3.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
          imgflag_4.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
    imgUSER.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
      img.onload = function() {
      	if(++loaded == 2)
        	draw();
      };
      
      function draw(){
              
        context.drawImage(img, 0, 0);  
    context.drawImage(imgflag_1, 515, 162,110,110);
    context.drawImage(imgflag_2, 515, 275,110,110);
    context.drawImage(imgflag_3, 515, 385,110,110);
    context.drawImage(imgflag_4, 515, 500,110,110);
    context.drawImage(imgUSER, 15, 160,400,400);
}

If you do this, then it works. If it doesn’t work like that, I checked through console.log the value is written normally to the variable, the array is also visible
imgflag_1.src = "minCountry/American.png";

var testingURL = "minCountry/"+arr[a[0]]+".png";
           imgflag_1.src = testingURL;

Sometimes if you reload the page many times it works fine

Answer 1

Where is the definition of an array arrand what is it a?

Answer 2

Once upon a time I wrote

function loadResources(arr,func){//функция загрузки внешних ресурсов(картинок) arr - массив ссылок, func - функция которая вызовется после загрузки всех ресурсов
  var loadStatus = false;
    loadStatus = {count: arr.length, loaded: 0, percent: 0};//count - общее количество ресурсов, loaded - сколько загружено ресурсов, percent сколько загружено в процентах
    for(var i = 0; i < arr.length; i++){
      var tmp = new Image();
      tmp.src = arr[i];
      tmp.onload = function(){
        loadStatus.loaded++;
        loadStatus.percent = (loadStatus.loaded * 100)/loadStatus.count;
        if(loadStatus.loaded >= loadStatus.count)
          func();
      }	
     }
  return loadStatus;  
 }

Example
loadResources(["/img/1.jpg","/img/2.jpg"],draw)