テキストボックスに値を入力するして、線を描く

JavaScriptでアプリケーションを作りることになりました。
まずは好きな数値を入力してキャンバス内のｘ軸に線引くプログラムを作りたいです。
どうしたらいいですか？Input typeで入力した値を線で引きたいです。

Java
1<!DOCTYPE html> 
2  <html long="ja">
3    <meta charset="utf-8">
4    <title>グラス</title>
5
6    <body>
7      <h1>キャンバスでグラフ描画</h1>
8      <h2>グラフを描画して二分法で解を求めます。</h2>
9      <canvas id="cv"width = 360 height="360"></canvas>
10     
11      <script type="text/javascript" src="js/main2.js"> //
12     // type属性でしていする
13      function disp()
14      {
15      //キャンバス要素を取得
16      var cvs = document.getElementById("cv");
17      console.log(cvs.innerHTML);
18      var ctx = cvs.getContext("2d");
19      
20     //var x_a = 200;
21     // var x_b = 300;
22    //  var a = x_a;
23    //  var b = x_b;
24    //  var mid;
25     
26     var start = eval(document.nibun01.x_a.value); //evalの引き数はストリング
27     var start1 = eval(document.nibun01.x_b.value);
28
29    var x_a = start;
30    var x_b = start1;
31    var a = x_a; 
32    var b = x_b;
33
34     {ctx.beginPath();
35       ctx.strokeStyle ='##FF66FF';
36       ctx.moveTo(x_b,300);
37       ctx.lineTo(x_b,100);
38      ctx.stroke();
39      }
40     
41      { 
42        ctx.strokeStyle ='#FF66FF'; //線の色
43      ctx.moveTo(x_a,300);//描画する位置まで指定する
44      ctx.lineTo(x_a,100);
45      ctx.stroke();
46      } 
47     
48      </script>
49    </body>
50    <form name="nibun01">
51      線を引く
52      x_A:<input type="text" name="x_a" value="0">
53      x_B:<input type="text" name="x_b" value="0">
54      <input type="button" value="表示"
55       onclick="disp()">
56    </form>
57  </html>
58  
59  <!--参照したページ　一番簡単なJavaScript -->---------> 引用テキスト

改善

inputのtypeをnumberにしました。
クリックすると線を引く処理をする disp,disp2を実行します

      <input type="button" value="表示"
       onclick="disp()">
　　　 <label for="num2">x_B</label>
      <input id="num2"type="number" name="x_b" value="0">
      <input type="button" value="表示"
       onclick="disp2()">

線を引くところを処理

 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 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();
    }