Как получить прямую линию перетаскивания мышью на холсте, используя reactJs?

Question

Я пытался создать область рисования, используя холст и reactJs .., и условие ... он должен рисовать только прямую линию ... скажем, на пустом холсте, когда я нажимаю любую область и перетащите мой курсор в любую область, между ними должна быть прямая линия .. и при перетаскивании мышью должна быть линия, следующая за курсором от начальной и конечной точки.

import React from "react";
import ReactDOM from "react-dom";

export default class canvas extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isDown: false,
      previousPointX: "",
      previousPointY: "",
    };
  }

  handleMouseDown = (event) => {
    console.log(event);
    this.setState(
      {
        isDown: true,
        previousPointX: event.offsetX,
        previousPointY: event.offsetY,
      },
      () => {
        const canvas = ReactDOM.findDOMNode(this.refs.canvas);
        var x = event.offsetX;
        var y = event.offsetY;
        var ctx = canvas.getContext("2d");
        console.log(x, y);
        ctx.moveTo(x, y);
        ctx.lineTo(x, y);
        ctx.stroke();
      }
    );
  };

  handleMouseMove = (event) => {
    // console.log(event);

    this.setState(
      {
        isDown: true,
      },
      () => {
        const canvas = ReactDOM.findDOMNode(this.refs.canvas);

        var x = event.offsetX;
        var y = event.offsetY;
        var ctx = canvas.getContext("2d");
        console.log(x, y);
        // ctx.moveTo(x, y);
        ctx.beginPath();
        ctx.moveTo(this.state.previousPointX, this.state.previousPointY);
        ctx.lineTo(this.state.previousPointX, this.state.previousPointY);
        ctx.stroke();
      }
    );
  };

  handleMouseUp = (event) => {
    this.setState({
      isDown: false,
    });

    const canvas = ReactDOM.findDOMNode(this.refs.canvas);
    var x = event.offsetX;
    var y = event.offsetY;
    var ctx = canvas.getContext("2d");

    ctx.moveTo(this.state.previousPointX, ctx, this.state.previousPointY);
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.closePath();
  };

  componentDidMount() {
    const canvas = ReactDOM.findDOMNode(this.refs.canvas);
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(255,255,255)";
  }

  render() {
    return (
      <div>
        <canvas
          id="canvas"
          ref="canvas"
          width={2000}
          height={2000}
          onMouseDown={(e) => {
            let nativeEvent = e.nativeEvent;
            this.handleMouseDown(nativeEvent);
          }}
          onMouseMove={(e) => {
            let nativeEvent = e.nativeEvent;
            this.handleMouseMove(nativeEvent);
          }}
          onMouseUp={(e) => {
            let nativeEvent = e.nativeEvent;
            this.handleMouseUp(nativeEvent);
          }}
        />
      </div>
    );
  }
}