使用javascrip在一页HTML上的多个画布上绘制多个图像

如何解决使用javascrip在一页HTML上的多个画布上绘制多个图像

我找到了在画布上绘制多个图像的方法 How to add multiple images to html5 canvas

以及在页面上绘制多个画布的方法 Draw Multiple Canvas on a single page

但是当我尝试绘制多个画布时，每个画布都包含多个图像加载，因此不起作用。 只有最后一个画布可以加载图像，而其他画布则不能。 您能帮我解决这个问题吗？ 我的代码是

enter code here
var CanvasList = document.getElementsByClassName("listCanvas");
for (var i = 0; i < CanvasList.length; i++) {
    var canvas = CanvasList[i]
    ctx = canvas.getContext('2d');



    var img_Original = new Image();
    img_Original.src = '../Images/hizume.jpg';
    img_Original.onload = function () {
        canvas.height = img_Original.height;
        canvas.width = img_Original.width;
        ctx.drawImage(img_Original,0);
    };

var strPart = CanvasList [i] .id;

    do {
        var index = strPart.indexOf(",")
        var partGet = strPart.substring(0,index);
        if (partGet.length == 1) {
            partGet = "0" + partGet;
        }
        var source = "../Images/hizume_" + partGet + "_multi.png";
        var nextImg = new Image();
        nextImg.src = source;
        Img.push(nextImg);
        strPart = strPart.substring(index + 1);

    }
    while (strPart.length > 0);

    partCount = Img.length;
    Img[partCount - 1].onload = function () {
        ctx.drawImage(img_Original,0);
        for (var j = 0; j < partCount; j++) {
            ctx.drawImage(Img[j],0);

        }

    }
}