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

Question

html

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

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可以插进去，但是图片没有描绘出来。求问这是为什么？