HTML Canvas无法从文件绘制图片：问题排查求助

你的代码存在两个核心问题，导致画布上看不到内容：

• Canvas未挂载到DOM树：你用document.createElement("canvas")创建了画布元素，但没有将它添加到页面的DOM结构中，所以即使完成绘制，页面也无法渲染出这个画布。
• 忽略图片加载的异步特性：虽然开发者工具显示图片已加载，但设置myImage.src后立即调用drawImage时，图片可能还未完成解码、准备好绘制，此时调用drawImage不会生效。

修正后的代码 #

const canvas  = document.createElement("canvas");
const context = canvas.getContext("2d");
// 将画布添加到页面body中（也可以添加到其他指定父元素）
document.body.appendChild(canvas);
// 可根据需求设置画布宽高，默认是300x150
canvas.width = 100;
canvas.height = 100;

const myImage = new Image();
myImage.src = "img/image.jpg";

// 等待图片加载完成后执行绘制
myImage.addEventListener('load', () => {
  context.drawImage(myImage, 0, 0, 100, 100);
});

额外注意事项 #

• 用const/let声明myImage，避免全局变量污染；
• 如果图片加载失败（比如路径错误），可以添加error事件监听排查问题：

  myImage.addEventListener('error', (err) => {
    console.error('图片加载失败:', err);
  });
  

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