Canvas开发出现context.fillReact is not a function报错，绘制功能失效如何解决

错误产生原因 #

• 直接报错原因是API名称拼写错误：Canvas 2D上下文的填充矩形方法正确名称是fillRect，代码中误写为fillReact，多了一个字母t，JS找不到对应方法就抛出该错误，代码执行到这一行直接中断，后续绘图逻辑完全不会运行。
• 除此之外代码还有多个隐藏逻辑问题，即使修复拼写错误也无法正常绘制线条：
  • 计算canvas内部相对坐标时误用了赋值运算符=，正确应该用减法运算符-，错误写法会直接覆盖clientX/clientY的原始值，导致坐标完全错误。
  • draw函数中仅调用了moveTo设置路径起点，没有调用lineTo设置路径终点，执行stroke时没有可渲染的路径，不会生成任何线条。
  • 没有绑定mouseup、touchend等结束绘图的事件，is_drawing状态会一直保持为true，鼠标/触摸离开画布后还会错误触发绘制逻辑。
  • canvas宽度赋值逻辑错误，canvas.width = window.innerWidth = 750的连续赋值会错误修改window.innerWidth的原生值，属于无效冗余逻辑。

修复后的完整代码 #

const canvas = document.getElementById("canvas"); 
canvas.width = 750;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "white";
// 修复fillRect拼写错误
context.fillRect(0, 0, canvas.width, canvas.height);
let draw_color = "black";
let draw_width = "2";
let is_drawing = false;

// 补充结束绘图的事件绑定
canvas.addEventListener("touchend", endDraw, false);
canvas.addEventListener("touchcancel", endDraw, false);
canvas.addEventListener("mouseup", endDraw, false);
canvas.addEventListener("mouseout", endDraw, false);

canvas.addEventListener("touchstart", startDraw, false);
canvas.addEventListener("touchmove", draw, false);
canvas.addEventListener("mousedown", startDraw, false);
canvas.addEventListener("mousemove", draw, false);

function startDraw(event) {
  is_drawing = true;
  context.beginPath();
  // 修复坐标计算的运算符错误
  context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
  event.preventDefault();
}

function draw(event) {
  if (is_drawing) {
    // 补充lineTo设置路径终点
    context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
    context.strokeStyle = draw_color;
    context.lineWidth = draw_width;
    context.lineCap = "round";
    context.lineJoin = "round";
    context.stroke();
    // 重置路径起点避免线条断连
    context.beginPath();
    context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
  }
  event.preventDefault();
}

// 新增结束绘图的状态重置函数
function endDraw(event) {
  is_drawing = false;
  event.preventDefault();
}

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