在JavaScript Canvas中正确覆盖图像

Question

我正在使用JavaScript编写游戏，并且遇到了一些图形障碍;为了将图形绘制到屏幕上，我基本上创建了一个多维的图块阵列，在画布上的每个相应(x, y)坐标处绘制图像。数组结构如下所示;

var tiles =
[
  [ [ [ src1, src2] ], [ [ src1, src2 ] ] ],
  [ [ [ src1, src2] ], [ [ src1, src2 ] ] ]
];

在上面的示例中，所需的结果将是分为四个网格方块的画布，每个网格方格将填充基础层src1和透明覆盖层src2。到目前为止，我已经能够使用以下代码完成此任务;

的JavaScript

function drawCanvas(canvasID, tiles)
{
    let canvas = document.getElementById(canvasID);

    canvas.height = Game.imageSize * tiles.length;
    canvas.width = Game.imageSize * tiles[0].length;

    for (let x = 0; x < tiles.length; x++)
    {
        for (let y = 0; y < tiles[x].length; y++)
        {
            fillCanvasCell(canvasID, { x: x, y: y }, tiles[x][y]);
        }
    }
}

function fillCanvasCell(canvasID, coords, tiles)
{
    let context = document.getElementById(canvasID).getContext("2d");

    context.clearRect(Game.imageSize * coords.y, Game.imageSize * coords.x, Game.imageSize, Game.imageSize);

    tiles.forEach(function(tile)
    {
        let image = new Image();
        image.onload = function()
        {
            context.drawImage(image, Game.imageSize * coords.y, Game.imageSize * coords.x);
        };
        image.src = tile;
    });
}

在此示例中，Game.imageSize为100（表示我在游戏中使用的图形的高度/宽度（以像素为单位））。正如我之前所说，这完全可以完成任务，完全按照我的要求完成...

......有一个例外;因为图像的实际绘制是在图像加载时完成的，有时它们会无序加载，基础层将被绘制在透明层的顶部......

我的问题是这个;我究竟能做些什么来防止这种情况发生？我是否需要彻底改变我画这些画布的方式？或者我只需要预先加载图像，然后拉出预先加载的图像，而不是让JavaScript每次都制作新图像？