为什么我的画布图像没有加载/渲染在适当的顺序或预期与image.onload?

Question

我正在尝试将一个图像加载到HTML画布上，然后在该图像的顶部加载另一个图像。但是，我从每个浏览器得到以下行为:

Chrome:

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

刷新-有时字符图像出现在背景图像的前面，然后其他时候是相反的。此行为没有模式。

注意:当代码直接插入到浏览器控制台时，它的行为如预期的那样。(背景图像在后面，字符图像在前面)。

Firefox:

第一次执行-只有背景图像(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";

Answer 1

将第二张图片的绘制移动到背景图片的onload事件处理程序中。

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