在画布上绘制图像

我正在尝试将图像放在画布上。我阅读了以下教程https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images并尝试做类似的事情 我的画布是<canvas id="canvas" width="400" height="400"></canvas>我已经创建了这个函数

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

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

thanks

根据教程，你应该包裹你的ctx.drawImage() inside img.onload like so

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';
}

我希望这有帮助。