调用canvas.getContext()出现Uncaught TypeError错误，求原因

首先，你的代码里存在两个关键问题，其中一个会直接抛出与你描述类似的错误，另一个是潜在逻辑问题：

1. 立即执行事件监听器的写法错误 #

你写的这行代码：

(window.addEventListener("resize", () => {
  canvas.width = window.innerWidth; canvas.width = window.innerHeight;
}))()

window.addEventListener的返回值是undefined，你试图把这个返回值当作函数调用（最后的()），这会直接抛出Uncaught TypeError: (window.addEventListener(...)) is not a function——这很可能是你误描述成canvas.getContext(...)相关错误的核心原因。

正确的写法应该是先定义监听函数，再手动触发一次初始化，而非直接执行addEventListener的返回值：

const handleResize = () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight; // </think_never_used_51bce0c785ca2f68081bfa7d91973934>你之前两次赋值width，这里应该改为height，否则canvas高度不会被设置
};
window.addEventListener("resize", handleResize);
handleResize(); // 手动触发一次，初始化canvas尺寸

2. 若确实遇到canvas.getContext相关错误的排查方向 #

如果确实出现canvas.getContext is not a function类错误，可能的原因包括：

• canvas元素未被正确获取：虽然你的脚本放在canvas标签之后，但如果脚本被设置为异步加载（比如加了async属性），或者页面中存在其他id为canvas的元素，会导致document.getElementById("canvas")返回null或非canvas元素。可以在获取canvas后增加校验：

  const canvas = document.getElementById("canvas");
  if (!canvas) {
    console.error("未找到canvas元素");
    return;
  }
  const ctx = canvas.getContext("2d");
  

• 全局方法被意外覆盖：如果页面其他代码修改了HTMLElement.prototype.getContext，会导致canvas的getContext方法失效，但这种情况非常罕见。

保留JSDoc智能提示的完整修正代码 #

修改后的JS代码如下，同时保留JSDoc标注以支持VS Code智能提示：

/**
 * @type {HTMLCanvasElement}
 */
const canvas = document.getElementById("canvas");

if (!canvas) {
  console.error("未找到canvas元素");
} else {
  /**
   * @type {CanvasRenderingContext2D}
   */
  const ctx = canvas.getContext("2d");

  const handleResize = () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  };
  window.addEventListener("resize", handleResize);
  handleResize();

  canvas.style.border = "2px solid black";
}

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