Javascript HTML画布呈现无序

我一直在开发一个小程序，它可以从几个层中生成一个完成的图像。我需要它都在一个画布上，以便我可以保存为一个单一的图像最终产品。但是，当我运行代码时，它会以随机顺序绘制层。如果有人能给我解释一下如何让图层按顺序渲染，我将不胜感激

function addimage(image, layer) {
var canvas = document.getElementById('paper'),
context = canvas.getContext('2d');

var img = new Image();
img.src = "Images/" + image;
img.onload = function(){
    if (image == "Khundii_Agouti_Basic.png"){
        context.globalCompositeOperation = "multiply";
    } else if (image == "Khundii_Agouti_Cinnamon.png"){
        context.globalCompositeOperation = "overlay";
    } else if (layer == "pattern1"){
        context.globalCompositeOperation = "overlay";
    } else {
        context.globalCompositeOperation = "source-over";
    }
    context.drawImage(img, 0, 0, 500, 500);
}
}

上面是将图像添加到画布的代码

addimage(baseImage);
if (pattern1 == true)
    addimage(pattern1Image, "pattern1");
if (pattern2 == true)
    addimage(pattern2Image);
if (tint1 == true)
    addimage(tint1Image);
if (tint2 == true)
    addimage(tint2Image);
if (agouti == true)
    addimage(agoutiImage);
addimage(maneImage);
addimage(eyeImage);

addimage("Khundii_Line_Black.png");

这就是它的名字

---

如果您想了解更多信息，可以找到所有代码。

这种看似随机的排序背后的原因是渲染图像之前的加载时间。由于加载是一个异步过程，计算机将遍历所有图像，并开始将它们全部加载到一行中。根据图像的不同，与最后一个图像相比，计算机加载第一个图像可能需要更多的时间

既然我们了解了这个问题，那么潜在的解决方案是什么？最糟糕的可能是同步加载图像。我将在这里留下一个参考，但这样做几乎从来都不是一个好主意。更好的方法是为addImage函数使用回调函数。像这样的东西可以达到目的：

function addimage(image, layer, callback) {
    var canvas = document.getElementById('paper'),
    context = canvas.getContext('2d');

    var img = new Image();
    img.src = "Images/" + image;
    img.onload = function(){
        if (image == "Khundii_Agouti_Basic.png"){
            context.globalCompositeOperation = "multiply";
        } else if (image == "Khundii_Agouti_Cinnamon.png"){
            context.globalCompositeOperation = "overlay";
        } else if (layer == "pattern1"){
            context.globalCompositeOperation = "overlay";
        } else {
            context.globalCompositeOperation = "source-over";
        }
        context.drawImage(img, 0, 0, 500, 500);
        callback();
    }
}

---

要使用此功能，只需将您希望在之后运行的所有代码放入回调函数。

您可以发布HTML，或者为人们设置一个代码片段以进行故障排除吗？这将有助于我们重现问题并找到解决方案。谢谢问题是，我需要连续多次调用addImage函数，因此对于这样的回调，我必须不断嵌套不同的回调。