【実行画面】
  1. 【実行画面のソーコード】
    <canvas id="mycanvas"></canvas>
    
    <style>
    canvas
    {   border: 1px solid silver;  }
    </style>
    
    <script>
    var canvas = document.getElementById('mycanvas');
    var c = canvas.getContext('2d');
    
    // 線の色
    c.strokeStyle = 'red';
    
    // パスの開始
    c.beginPath();
    // 1本目
    c.moveTo(50, 40);
    c.lineTo(250, 40);
    // 2本目
    c.moveTo(50, 80);
    c.lineTo(250, 80);
    // 3本目
    c.moveTo(50, 120);
    c.lineTo(250, 120);
    // 描画
    c.stroke();
    </script>
    
  2. 二次元のコンテキストを取得して、キャンバスに直線を描きます。
    線の色を赤に設定します。
  3. c.beginPath(); でパスを開始して、c.moveTo(50, 40); c.lineTo(250, 40); で一本目を描きます。
    c.moveTo(50, 80); c.lineTo(250, 80); で二本目を描きます。
    c.moveTo(50, 40); c.lineTo(250, 40); で三本目を描きます。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)