在React中保存画布状态

Question

我正在实现Draw功能，以便在画布上画一条线。第一次双击将激活绘图功能，在鼠标移动时将绘制线条，第二次双击将禁用绘图功能。 当我第三次双击时，先前绘制的线消失了。我的要求是我想保留所有行。我怎么做？ 下面是我的绘制函数：

handleMouseMove(event){
        if(this.state.isDouble)
        {

            this.Draw(event)
        }
        else{

        }
    }
 Draw(event){


        x2=event.offsetX
        y2=event.offsetY
        const canvas = document.getElementById("canvas");

        var ctx = canvas.getContext("2d");

        ctx.lineWidth = 3;
        //Deleting The State
        ctx.canvas.width = ctx.canvas.width;


        console.log("First" + this.state.previousPointX,this.state.previousPointY)
        console.log("Second" + x2,y2)
        xtemp=x2
        ytemp=this.state.previousPointY


        console.log("Temp" + xtemp,ytemp)
        ctx.beginPath()

        ctx.moveTo(xtemp,ytemp);
        ctx.lineTo(x2,y2);
        ctx.stroke();
        ctx.moveTo(xtemp,ytemp);
        ctx.lineTo(this.state.previousPointX,this.state.previousPointY);
        ctx.strokeStyle = "black";
        ctx.stroke();
       }