JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

var arr = ["http://dk-vog.ru/wp-content/uploads/art-лев-красиво-красивые-цвета-438674-1024x576.jpeg", "https://online.avatis.kz/upload/iblock/2f7/di-1MPX.jpg", "http://www.zastavki.com/pictures/1920x1200/2011/3D-graphics_Flower_abstraction_032885_.jpg"];
var canvas;
window.onload = function () {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    loadResources(arr,function(){loadImg(arr, draw);});
}

function loadImg(linkArr, draw) {
    var imgs = new Array;
    linkArr.forEach(function (link) {
        var img = new Image();
        img.src = link;
        imgs.push(img);

    });
    draw(imgs);
};

function draw(imgs) {
    var step = 0;
    imgs.forEach(function (src) { 
        console.log(src, step, step, 200, 150);
        ctx.drawImage(src, step, step, 200, 150) 
        step += 50;

    });
}

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