在JavaScript画布中正确覆盖图像

我正在用JavaScript编写一个游戏，遇到了一些图形障碍；为了在屏幕上绘制图形，我基本上创建了一个多维瓷砖阵列，在画布上相应的

（x，y）

坐标处绘制图像。数组结构如下所示

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

在上面的示例中，期望的结果是将画布分割成四个网格正方形，每个正方形将填充基本层

src1

和透明覆盖层

src2

。到目前为止，我已经能够使用以下代码实现这一点：

JavaScript

函数绘图画布（画布、瓷砖）
{
让canvas=document.getElementById（canvasID）；
canvas.height=Game.imageSize*tiles.length；
canvas.width=Game.imageSize*tiles[0]。长度；
对于（设x=0；x

在本例中，

Game.imageSize

为

100

（以像素表示我在游戏中使用的图形的高度/宽度）。正如我之前所说，这项工作非常完美，完全按照我的要求完成任务

……只有一个例外；因为图形的实际绘制是在图像加载时完成的，有时它们会加载不正常，并且基础层将绘制在透明层的顶部

我的问题是,；我能做些什么来防止这种情况发生？我需要彻底改变我在这些画布上绘画的方式吗？或者我只需要预加载图像，然后拉取预加载的图像，而不是让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;
    });
}