所以！在此期间我自己想通了：）
我创建了一个带有promise的异步循环，在其中我为每个图像创建了一个临时画布，然后将其绘制到一个画布上，我从这个解决方案中获得了灵感：https://stackoverflow.com/a/6687218/15289586
下面是最终代码：

// create the parent canvas
    let parentCanv = document.createElement("canvas");
    const getContext = () => parentCanv.getContext("2d");
    const parentCtx = getContext();
    parentCanv.classList.add("grid");

    // det the wrapper from the DOM
    let wrapper = document.getElementById("wrapper");

    // this function loops through the array
    async function drawShapes(files) {
      for (const file of files) {
        await depict(file);
      }
      // if looped > append parent canvas to to wrapper
      wrapper.appendChild(parentCanv);
    }

    // async image loading worked best
    const loadImage = (url) => {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = () => reject(new Error(`load ${url} fail`));
        img.src = url;
      });
    };

    // depict the file
    const depict = (options) => {
      // make a promise
      return new Promise((accept, reject) => {
        const myOptions = Object.assign({}, options);
        var childCanv = document.createElement("canvas");
        const getContext = () => childCanv.getContext("2d");
        const childCtx = getContext();
        if (myOptions.ext == "svg") {
          loadImage(myOptions.uri).then((img) => {
            childCtx.drawImage(img, 0, 0, 100, parentCanv.height);
            childCtx.globalCompositeOperation = "source-in";
            childCtx.fillStyle = myOptions.clr;
            childCtx.fillRect(0, 0, parentCanv.width, parentCanv.height);
            parentCtx.drawImage(childCanv, 0, 0);
            accept();
          });
        } else {
          loadImage(myOptions.uri).then((img) => {
            // ctx.fillStyle = myOptions.clr;
            childCtx.drawImage(img, 0, 0, 100, parentCanv.height);
            parentCtx.drawImage(childCanv, 0, 0);
            accept();
          });
        }
      });
    };

    drawShapes(this.inputs);