Canvas Rect

【実行画面】

【実行画面のソーコード】

<body>
【実行画面】<br>
<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>

二次元のコンテキストを取得して、キャンバスに矩形を描きます。
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(高さ) が消去の範囲です。

マウスのクリックで青色の矩形を追加します
window.onmousedown でマウスのクリックを検出して MouseClick() 関数を呼び出します。
MouseClick() 関数では alert() でマウスのクリックを確認して青色の矩形を描画します。

<script type="text/javascript">
window.onmousedown =
  function MouseClick()
  {
    alert("DIV がクリックされました");
    c.strokeStyle = 'blue';
    c.strokeRect(30, 40, 230, 70);
  }
</script>
</head>

＜body＞ではグローバル変数で定義するために canvas と c の var を外しています。
今回は var で宣言しても支障は無いようです。
canvas = document.getElementById('mycanvas'); c = canvas.getContext('2d');

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