Canvas内绘制矩形超出容器，需使Canvas宽度匹配div的问题求助

问题根源在于Canvas的绘图缓冲区尺寸与CSS显示尺寸不匹配，且未同步容器尺寸导致绘图偏移。以下是具体修复方案：

核心修复要点 #

• 同步Canvas的width/height属性（绘图像素尺寸）与容器实际尺寸
• 设置Canvas的CSS样式，使其显示尺寸与容器完全匹配，避免拉伸变形
• 添加窗口 resize 监听，确保容器尺寸变化时Canvas能同步更新

修复后的代码 #

import { useRef, useEffect } from "react";

export default function App() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const divRef = useRef<HTMLDivElement>(null);

  const drawRect = () => {
    const canvas = canvasRef.current;
    const container = divRef.current;
    const ctx = canvas?.getContext("2d");
    
    if (ctx && container) {
      // 清除旧绘图内容
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // 同步Canvas绘图缓冲区与容器尺寸
      canvas.width = container.clientWidth;
      canvas.height = 45;
      // 设置Canvas显示样式与容器一致
      canvas.style.width = `${container.clientWidth}px`;
      canvas.style.height = "45px";
      // 绘制矩形
      ctx.strokeStyle = "#000";
      ctx.strokeRect(0, 0, canvas.width, canvas.height);
    }
  };

  useEffect(() => {
    drawRect();
    // 监听窗口尺寸变化，重新调整Canvas
    window.addEventListener("resize", drawRect);
    return () => window.removeEventListener("resize", drawRect);
  }, []);

  return (
    <div className="App" ref={divRef}>
      <canvas className="timelineCanvas" ref={canvasRef}></canvas>
    </div>
  );
}

关键说明 #

• Canvas的width/height属性是内部绘图的像素分辨率，CSS的width/height是显示时的缩放尺寸，两者必须匹配才能避免绘图偏移或拉伸。
• 调用clearRect可清除resize时残留的旧绘图内容，保证显示干净。
• 窗口resize监听用于适配容器宽度随窗口变化的场景，确保Canvas始终和容器保持一致。

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