【実行画面】
  1. 【実行画面のソーコード】
    <canvas id="mycanvas"></canvas>
    
    <style>
    canvas
    {   border: 1px solid silver;  }
    </style>
    
    <script>
    var canvas = document.getElementById('mycanvas');
    var c = canvas.getContext('2d');
    
    // 矩形の枠線
    c.lineWidth = 2; // 線幅
    c.strokeStyle = 'red';
    c.strokeRect(20, 25, 260, 100);
    
    // 矩形を塗りつぶす
    c.fillStyle = 'green';
    c.fillRect(50, 50, 200, 50);
    
    // 矩形領域の消去
    c.clearRect(80, 65, 140, 20);
    </script>
    
  2. 二次元のコンテキストを取得して、キャンバスに矩形を描きます。
    1. 最初に赤線で矩形を描きます。
      c.lineWidth = 2; が線の幅で、c.strokeStyle = 'red'; が色の設定です。
      20,25 が左上座標で、260,100 が幅と高さです。
    2. 次に緑色で塗りつぶした矩形を描きます。
      色を 'green' に設定して、50,50 から 200,50 に矩形を描きます。
    3. 最後に塗りつぶした緑色の矩形の一部を消去します。
      80,65 から 140,20 が消去の範囲です。

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