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 が左上座標(X,Y)で、260,100 が幅と高さです。
      
   2. 次に緑色で塗りつぶした矩形を描きます。
      色を 'green' に設定して、50,50 から 200,50 に矩形を描きます。
      
   3. 最後に塗りつぶした緑色の矩形の一部を消去します。
      80,65(X, Y) から 140(幅),20(高さ) が消去の範囲です。
      

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