在DOM中插入的canvas不能写入图像

Question

html

    <div id="canvasbox">
         <canvas id="bgcanvas" width="500" height="500"></canvas>
    </div>

js

    var img = new Image();
    var coordinate = "canvas";
    var newcanvas = "<canvas id="+coordinate+" width="+500+" height="+500+"></canvas>";
    $("#canvasbox").append(newcanvas);
    var newctx = document.getElementById(coordinate).getContext('2d');
    img.src = "./img/xx.png";
    img.onload = function(){
          newctx.drawImage(img,0,0,30,30);
        }

在canvasbox里存在一个canvas，是作为背景图片的，然后我想动态插入新的canvas并画图，新的canvas可以插进去，但是图片没有描绘出来。求问这是为什么？

Answer 1

很容易，把kdsjd改jkd就好

Answer 2

把这段代码放到setTimeout 中去：

 setTimeout(()=>{
 var newctx = document.getElementById(coordinate).getContext('2d');
    img.src = "./img/xx.png";
    img.onload = function(){
          newctx.drawImage(img,0,0,30,30);
        }
    })

你刚创建的元素，浏览器还没有绘制出来，document.getElementById(coordinate) 是查找不到元素的，你能看到，是因为你看的时候它已经绘制出来的，但代码中getElement的时候它可能还不存在。