Javascript 从url加载图像并绘制到HTML5画布

从javascript中的url加载图像时遇到问题。下面的代码可以工作，但我不希望必须从html加载图像。我想使用纯javascript从url加载图像

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imImageId");
ctx.drawImage(img, 0, 0);

---

很简单，只需在JavaScript中创建一个图像对象，设置

src

，并在绘制之前等待加载事件

工作示例：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
};
img.src=https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
这么简单…

var img=new Image();
img.onload=start;
img.src="myImage.png";
function start(){
    ctx.drawImage(img,0,0);
}

如果您想要
承诺
版本而不是
加载
方法：

let ctx=document.querySelector（#myCanvas”）.getContext（“2d”）；
异步函数drawImage（url）{
设img=新图像（）；
等待新的承诺（r=>img.onload=r，img.src=url）；
ctx.drawImage（img，0,0）；
}
drawImage（“https://example.com/image.png");