Html 在画布上绘制图像

我试图把一个图像放在画布上。我阅读了下面的教程 并试图做类似的事情 我的画布是

我已经创建了这个函数

  function putImage(){
         var img = new Image();
         img.src = "./path.png"; 
         var ctx = document.getElementById('canvas').getContext('2d');
         ctx.drawImage(img,8,8);            
  }

但是图像没有出现在画布上。 我已经打印了图像路径，它是正确的，所以我能够消除这个问题。 有什么建议吗

---

谢谢

根据教程，您应该像这样将

ctx.drawImage（）

包装在

img.onload中

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
  img.src = '/files/4531/backdrop.png';
}

我希望这能有所帮助。
为了补充哈斯的答案：如果你不喜欢
onload
方法，你可以
等待
a
承诺，就像这样：

async函数draw（）{
设ctx=document.getElementById（“画布”）.getContext（“2d”）；
让url=”https://example.com/image.png";
设img=新图像（）；
等待新的承诺（r=>img.onload=r，img.src=url）；
ctx.drawImage（img，0,0）；
}
如果您不喜欢使用
Promise
或
onload
也可以使用：

您确定映像路径正确吗？开发人员控制台/firebug上是否有任何错误？是的，100%确定我已将其打印到控制台，并且路径正确。“/dir/image.png”控制台中没有错误要详细说明为什么要这样做：当设置图像的
.src
属性时，会从服务器请求图像，但是程序不会等到图像加载完毕。它一直在运行，当涉及到需要尚未加载的图像的ctx.drawImage方法调用时，它会忽略此调用。这就是为什么您必须等待图像加载，然后给它一个回调函数，该函数会在图像加载后绘制图像
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.addEventListener('load', function(){
    ctx.drawImage(img, 0, 0);
  });
  img.src = '/files/4531/backdrop.png';
}