为什么我的画布图像没有按正确的顺序加载/渲染，或者没有按预期使用 image.onload？

Question

我正在尝试将一张图片加载到 HTML 画布上，然后将另一张图片加载到该图片之上。但是，我从每个浏览器中得到以下行为：

铬：

第一次执行 - 似乎只有背景图像（backImage）存在，但是在加载期间的一毫秒内，字符图像（charImage）在背景图像后面可见。

刷新 - 有时角色图像出现在背景图像前面，有时反之亦然。这种行为没有模式。

注意：当代码直接插入浏览器控制台时，它的行为符合预期。 （背景图片在后面，人物图片在前面）。

火狐：

第一次执行 - 似乎只有背景图像（backImage）存在，但是在加载期间的一毫秒内，字符图像（charImage）在背景图像后面可见。

刷新 - 突然刷新（以及所有后续刷新）后，它的行为符合预期（背景图像在后面，角色图像在前面）。

我之前看过一些关于使用 .onload 事件的帖子，但是我在这里使用它并且仍然有我认为是时间问题的问题。非常感谢任何建议。一般来说，我对编码很陌生。

TIA！

// Create Canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Background Image
var backImage = new Image();
backImage.onload = function(){
    ctx.drawImage(backImage,0,0);
};
backImage.src = "Images/Flowers.jpg";

// Character Image
var charImage = new Image();
charImage.onload = function(){
    ctx.drawImage(charImage,0,0,50,50);
};
charImage.src = "Images/Butterfly.jpg";