JavaScript如何在图像加载后绘制

我尝试将图像作为对象放入imageCollection数组中，并基于layerId属性绘制它们。 我尝试了一些演示，但失败了，因为在加载所有图像后，绘图功能不会出现。 JS小提琴：

我希望警报显示如下： 添加沙发后的尺寸：1 加床后尺寸：2 绘图功能中的大小：2 但有时它在添加沙发/床后的两个/任意一个尺寸之前显示为绘图功能中的尺寸。 如何确保将所有图像加载并推送到imageCollection中，以便以后可以绘制它们？

---

谢谢，我强烈建议您在更改src之前定义onload6分钟前

---

其次，您需要在最后一次onload中调用draw

---

首先，我强烈建议您在更改src之前定义onload

img.onload = function() { 

var imageData = {
  image: img,
  layerId: 1  
};
imageCollection.push(imageData);
alert("size after sofa is added : "+imageCollection.length);

}

var img = new Image();
img.onload = function() {
  var imageData = {
    image: img,
    layerId: 1
  };
  imageCollection.push(imageData);
  console.log("size after sofa is added : " + imageCollection.length);
}
img.src = "https://...";