如何在canvas中绘制图片？运行代码报img相关错误如何解决？

你的代码核心报错原因是 Image 构造函数首字母未大写，JavaScript 对大小写敏感，new image() 会被识别为未定义的构造函数，就会触发你遇到的类型错误。

修改后的正确代码如下：

function setupcanvas() {
  var canvas = document.querySelector('canvas')
  var c = canvas.getContext("2d")
  // Image 构造函数首字母必须大写
  var img = new Image()
  img.src = "flappy_bird_bird.png"
  img.onload = function(){
    c.drawImage(img, 100, 100)
  }
}

其他优化和排查注意项：

• 原代码中的c.beginPath()属于冗余代码，该方法用于开启路径绘制流程，和绘制图片无关，保留也不影响运行，可按需删除
• 如果修改后仍然无法显示图片，先检查图片路径是否正确，确保flappy_bird_bird.png和当前 HTML 文件在同级目录下
• 可以给img添加onerror事件监听，快速定位图片加载失败的问题

内容的提问来源于stack exchange，提问作者Khaled