React签名组件：Canvas输入回退时内容未同步更新求助

问题核心在于Canvas的绘制机制：它是叠加式绘制，每次调用fillText时，新内容会直接画在旧内容之上，不会自动清除之前的像素。退格修改输入内容后，旧文本的像素依然保留，导致视觉上的残留。

修复方案 #

在每次绘制新文本前，使用clearRect清空整个画布区域：

export default function App() {
  const typedCanvasRef = useRef<HTMLCanvasElement>(null);
  const [inputValue, setInputValue] = useState("");

  useEffect(() => {
    const canvas = typedCanvasRef.current;
    const ctx = canvas?.getContext("2d");

    if (canvas && ctx) {
      // 先清空整个画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      ctx.font = "32px cursive";
      ctx.fillStyle = "black";
      ctx.textBaseline = "middle";
      ctx.fillText(inputValue, 10, canvas.height / 2);
    }
  }, [inputValue]);

  return (
    <div className="App">
      <canvas ref={typedCanvasRef} width={400} height={100} /> {/* 建议显式设置canvas尺寸 */}
      <input
        placeholder="enter text here"
        type="text"
        value={inputValue}
        onChange={(event) => setInputValue(event.target.value)}
      />
    </div>
  );
}

额外说明 #

1. 显式设置Canvas尺寸：默认Canvas的宽高是300x150，建议在JSX中显式定义width和height属性，避免样式缩放导致绘制模糊或区域不对。
2. 精准清空（可选）：如果只需要清空文本区域，可以计算文本的宽度（用ctx.measureText(inputValue).width），只清除对应区域，但对于签名组件的文本模式，清空整个画布更简单直接。

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