画布无法在React.js中正确缩放

Question

我正在尝试在React.js应用程序中使用html画布，以允许用户使用其鼠标进行绘制。但是，笔画似乎放大了，并且定位因某种因素（不是常数）而偏离，因此在左上角它相当准确，但是当鼠标在画布上移动时，笔画移动得更快（或比鼠标更远。画布就是这样：

  <div>
    <canvas className={classes.canvas} ref={this.canvas} />
  </div>

具有以下样式（使用material-ui withStyles）：

const styles = {
  canvas: {
    width: "400px",
    height: "400px",
    border: "2px solid black",
    borderRadius: "5px"
  },
  container: {
    width: "100%",
    height: "100%"
  }
}

事件侦听器在componentDidMount中设置：

  componentDidMount() {
    const canvas = this.canvas.current;
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    this.setState({
      ctx,
      offsetX: canvas.offsetLeft,
      offsetY: canvas.offsetTop
    });
    canvas.addEventListener("mousedown", this.handleMouseDown);
    canvas.addEventListener("mouseup", this.handleMouseUp);
    canvas.addEventListener("mouseleave", this.handleMouseUp);
    canvas.addEventListener("mousemove", this.handleMouseMove);
  }

处理程序如下：

  handleMouseDown = e => {
    const { ctx, offsetX, offsetY } = this.state;
    const x = e.clientX - offsetX;
    const y = e.clientY - offsetY;
    this.setState({ isDrawing: true });
    ctx.beginPath();
    ctx.moveTo(x, y);
  };

  handleMouseUp = e => {
    this.setState({ isDrawing: false });
    const { ctx } = this.state;
    ctx.closePath();
  };

  handleMouseMove = e => {
    if (this.state.isDrawing) {
      const { ctx, offsetX, offsetY } = this.state;
      console.log("offset", offsetX, offsetY);
      const x = e.clientX - offsetX;
      const y = e.clientY - offsetY;
      console.log("client", x, y);
      ctx.lineTo(x, y);
      ctx.stroke();
    }
  };

这是从左上角开始绘制一条线后画布的屏幕截图（添加了大约鼠标位置）：

更新：使用canvas.getBoundingClientRect().left and .top进行了尝试，实际上使情况变得更糟。我还尝试通过在绘制之前使用ctx.scale(0.5, 0.5)来缩小比例，但这一点都没有改变。