Javascript 画布drawImage函数在画布后插入img

我们期望从这段代码中通过Canvas DOMElement中的Url绘制图像，但是，当我检查DOM时，我注意到在Canvas之后插入了一个新的DOMElement IMG

是否推荐另一种语法，已知DOM似乎是这样的：

 var canvas = document.getElementById("canvaspreview");
       canvas.width=w;canvas.height=h;
       var ctx=canvas.getContext("2d");    
      var img=new Image();


      img.src=url;img.width=w;img.height=h;
      ctx.drawImage(img,0,0,w,h);

我得到的结果是：

<div id="bigpreview" style="display:block;">
  <canvas id="canvaspreview" width="800" height="520">Canvas not supported </canvas> 
</div>

找到了

应在图像加载后绘制图像

<div id="bigpreview" style="display:block;">
  <canvas id="canvaspreview" width="800" height="520">Canvas not supported </canvas> 
  <img src="" width="" height=""/>
</div>

---

看这个：

这真是，嗯，奇怪。除非您显式地将img对象放在DOM中，否则它不应该出现在DOM中。嗯，是的，这是显而易见的，但它不能解释为什么img标记显然会出现在您的DOM中。

img.onload=function(e){
 ctx.drawImage(img,0,0,w,h); 
  // بقية الكود هنا

}