何本も線が引かれてしまいます。

前提・実現したいこと

線を引く処理が関数disp,disp2で行っています。
線を引く機能を実装中に以下の問題が発生しました。

発生している問題

例えば、X_Aで0を選択するとx軸の0に赤い引かれてます。その次4を選択するとx軸の４のところに赤い線が引かれます。
しかし、４を選択したら０の線がそのまま残ってします。４を選択したら０の線が消えるようにしたいです。

###ソースコード

<!DOCTYPE html>
  <html long="ja">
    <meta charset="utf-8">
    <title>グラス</title>
    <body>
      <header>
        <h1 style="text-align:center">キャンバスでグラフ描画</h1>
      <h2 style="text-align:center">グラフを描画して二分法で解を求めます。</h2>
      </header>
      <script src="js/canvas.js"></script>
      <h3>グラフです。</h3>
        <canvas id="cv"width = 1000 height="600" align:center></canvas>
      </div>
      
      <script type="text/javascript"> //
     // type属性でしていする
     
      //キャンバス要素を取得
      var cvs = document.getElementById("cv");
      var ctx = cvs.getContext("2d");

      var width  = cv.width;
      var height = cv.height;
      var width2 = width/2;
      var height2 = height/2;
   
    function coordinate(){
      //x軸
      ctx.fillStyle = "rgb(0,180,0)";
      ctx.moveTo(0,height2);
      ctx.lineTo(width,height2);
      ctx.stroke();
      //y軸
     ctx.fillStyle = "rgb(0,180,0)";
      ctx.moveTo(width2,0);
      ctx.lineTo(width2,height);
      ctx.stroke();
      
      for(var i= -22;i<22;i+=2){ 
        //５ずつ
        ctx.fillText(i, (i*20)+width2,height2+10);
      }
      
      for(var i= -22;i<22;i+=2){ 
        //2ずつ
        ctx.fillText(-i, width2+10, (i*20)+height2);
      }
      
    }
    
      function disp(){
        var start = eval(document.nibun01.x_a.value);
        var start1 = (start*20) +width2;
        //読み込んだ値が違う時を移動する
        var start1 = (start*20) +width2;
        ctx.strokeStyle = "red";
        console.log(start1);
        ctx.beginPath();//初期化
        ctx.moveTo(start1,height2-100);
        ctx.lineTo(start1,height2+100);
        ctx.stroke();
      }
      
      function del(){
        ctx.clearRect(0,0,width,height);
      }
    
     function disp2(){
        var start10 = eval(document.nibun01.x_b.value);
        start11 = (start10*20)+width2;
        console.log(start11); 
        ctx.strokeStyle="blue"; //色の指定
        ctx.beginPath();//初期化
        ctx.moveTo(start11,height2-100);
        ctx.lineTo(start11,height2+100);
        ctx.stroke();
    }
 
    
    coordinate();
    disp();
    disp2();

      </script>
    </body>
    <br>
    <br>
    <FORM NAME="nibun01" >
      <p>処理:</p>
      
      <p>線を引く</p>
      <label for="num1">x_A</label>
      <input id ="num1"type="number" name="x_a" value="0">
      <input type="button" value="表示"
       onclick="disp()">
      <br>
      <label for="num2">x_B</label>
      <input id="num2"type="number" name="x_b" value="0">
      <input type="button" value="表示"
       onclick="disp2()">

       <div id = "output"></div>
       <label for="siki">式:</label>
       <input type="text" name="siki">
       <input type="button" value="表示"
       onclick="disp3()">
    </FORM>
  </html>