【実行画面】
  1. 【実行画面のソーコード】
    <canvas id="mycanvas"></canvas>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var c = canvas.getContext('2d');

// 線の色
c.strokeStyle = 'blue';
c.lineWidth = 3; // 線幅

// パスの開始
c.beginPath();
// 折れ線
c.moveTo(50, 30);
c.lineTo(250, 30);
c.lineTo(50, 120);
c.lineTo(250, 120);

// 描画
c.stroke();
</script>
  2. キャンバスの枠の表示を削除しています。
    二次元のコンテキストを取得して、キャンバスに折れ線を描きます。
    線の色を青に、線の幅を３に設定します。
  3. c.beginPath(); でパスを開始して、開始点(50, 30) に移動します。
    50, 30 から 250, 30 に線を描きます。
    そこから 50, 120 に二本目の先を描きます。
    そこから 250, 120 に三本目を描きます。

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