为何无法在Canvas中绘制图片？代码执行后图片未正常显示

根本问题 #

当前代码的核心逻辑漏洞是没有等待图片异步加载完成就执行绘制操作。
图片资源的加载过程是异步的，执行顺序并不会等图片加载完再往下走：

1. 初始化Image实例、设置src后，浏览器才会在后台发起请求加载图片
2. 紧接着马上执行ctx.drawImage()时，图片的像素数据还完全没准备好，自然无法绘制到Canvas上。

具体修复步骤 #

• 绑定图片加载完成回调：必须等图片的onload事件触发（代表图片资源完全加载完成）之后，再执行绘制逻辑；同时要加onerror事件捕获加载失败的场景，快速定位问题。
• 调整代码顺序：一定要先绑定好onload/onerror事件，最后再给img.src赋值，避免图片走本地缓存加载太快，导致事件没绑完就已经触发加载完成的情况。

修正后的JS完整代码：

window.onload = function() {
  const cnvs = document.getElementById("gc");
  const ctx = cnvs.getContext("2d");
  const img = new Image();

  // 图片加载完成后再绘制
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };

  // 捕获加载失败场景
  img.onerror = function() {
    console.error("road.jpg 加载失败，请检查路径配置");
  };

  // 最后设置图片路径
  img.src = "/img/road.jpg";
};

额外排查项 #

如果修复加载顺序后图片还是不显示，大概率是路径问题：

• 当前用的/img/road.jpg是网站根目录的绝对路径，如果你的项目部署在子路径下，或者是直接双击打开本地HTML文件（没有启动本地静态服务器），这个路径会出现404，打开浏览器开发者工具的网络面板，就能看到对应请求的失败状态，调整成正确的资源路径即可。

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