Canvas中图片无法加载问题：代码错误排查求助

我正在制作一个包含Canvas的网页，希望在Canvas内显示图片，但图片始终无法加载，且未找到代码问题。相关代码如下：

原始代码 #

HTML #

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <h1>
      Mi reto en Canvas
    </h1>
    <canvas id="canvas1" height="700px" width="700px"></canvas>
    <script src="script.js"></script>
  </body>
</html>

CSS #

body {
  font-family: sans-serif;
  background-color: rgb(240, 240, 150);
}

canvas {
  background-color: red;
  position: relative;
  top: 100px;
  left: 100px;
}

JavaScript #

var lienzo = document.getElementById("canvas1");
var papel = lienzo.getContext("2d");
var oveja = new Image();
oveja.src ="oveja.jpg"
oveja.addEventListener("load", dibujar());

function dibujar() {
  papel.drawImage(oveja, 0, 0);
}

预期效果为显示带有图片的Canvas，但实际仅显示红色方形区域，控制台无报错信息。

问题分析 #

1. 事件绑定错误：绑定load事件时使用dibujar()会立即执行函数，而非传递函数引用。此时图片还未加载完成，drawImage调用时图片资源不存在，无法完成绘制。
2. 加载顺序问题：先设置src再绑定load事件，若图片被浏览器缓存，load事件可能不会触发，导致绘制函数永远不执行。

修复方案 #

修改JavaScript代码，调整事件绑定方式和加载顺序：

var lienzo = document.getElementById("canvas1");
var papel = lienzo.getContext("2d");
var oveja = new Image();

// 先绑定load事件回调（传递函数引用，不要加括号）
oveja.addEventListener("load", dibujar);
// 再设置图片路径
oveja.src = "oveja.jpg";

function dibujar() {
  papel.drawImage(oveja, 0, 0);
}

额外验证项 #

• 确认oveja.jpg文件路径正确，和HTML文件在同一目录或路径指向准确
• 检查浏览器控制台是否有图片加载的404错误（路径错误时会出现）

内容的提问来源于stack exchange，提问作者Carmen Lucía