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); で一本目を描きます。
   50(X)-40(Y) から 250(X)-40(Y) に線が描画されます。
   c.moveTo(50, 80); c.lineTo(250, 80); で二本目を描きます。
   c.moveTo(50, 120); c.lineTo(250, 120); で三本目を描きます。
   

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