动态创建Canvas时使用ctx.drawImage无效的原因排查求助

核心问题分析 #

• 图片加载是异步操作：你直接在设置image.src后调用ctx.drawImage()，此时图片还未完成下载，浏览器无法绘制未加载完成的图片，导致drawImage无效。
• 关于fillRect不生效：原代码中fillRect逻辑本身没问题，可能是测试环境的临时异常，修正代码后会正常生效。

修复方案 #

通过监听图片的load事件，确保图片加载完成后再执行绘制操作，调整后的完整代码如下：

JavaScript 代码 #

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor = 'lightgreen';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

let image = document.createElement('img');
// 监听图片加载完成事件，触发绘制逻辑
image.addEventListener('load', () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, 0, 0, 500, 500);
  ctx.fillRect(100, 100, 50, 50); // 矩形会绘制在图片上方
});
// 设置图片地址触发加载（必须放在事件监听之后）
image.src = 'https://www.pngplay.com/wp-content/uploads/5/Alphabet-C-Transparent-File.png';

// 可选：监听图片加载失败的情况
image.addEventListener('error', (err) => {
  console.error('图片加载失败:', err);
});

CSS 代码 #

canvas {
  border: 1px solid black;
}

额外说明 #

• 不需要将img元素添加到document.body，除非你需要在页面上显示原图，否则可以删除document.body.appendChild(image)这一行。
• 如果遇到跨域图片无法绘制的情况，需要确保图片服务器配置了跨域允许的响应头，否则浏览器会阻止绘制操作。

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