详解canvas绘图多张图的排序次序难题

<div id="myContent"></div>
let imgArray = ['img1.png', 'img2.png'];
let receiveArray = new Array();
let $myContent = document.getELmentById("myContent");
let {imgW, imgH} = {300, 300};

let Canvas = document.createElement('canvas');
let ctx = Canvas.getContext("2d");
let scaleBy = 2;
Canvas.width = imgW * scaleBy;
Canvas.height= imgH * scaleBy;
imgArray.forEach((e, idx) => {
    let img = new Image();
    img.src = e;
    e.addEventListener('load', () => {
        ctx.drawImage(img, 0, 0, imgW * scaleBy, imgH * scaleBy);
        
        let imgCont = new Image();
        imgCont.src = Canvas.toDataURL();
        imgCont.id = 'img' + idx; 
        receiveArray.push(imgCont); // 将绘图的img连接点搜集到数字能量数组里，这里的次序将会和imgArray的次序不1样
        if (receiveArray.length === imgArray.length) { //全部照片load并绘图进行
            let sortArr = new Array();
            receiveArray.forEach(ex => { //将全部绘图照片按imgArray次序排列
                sortArr[ex.id.split('img')[1]] = ex;
            })
            sortArr.forEach(ex2 => {
                $myContent.appendChild(ex2)
            })
        }
    })
})