1. canvasとは

canvasキャンバスとは，ブラウザ上でjavascriptを使って図形を描くための仕様です．

2. canvasを使って図形を描く具体例【長方形】

HTML文書のbody要素に，次のように記述します．
青字で示した部分は各自が指定する名前（英字で始まり，大小の英数字，アンダーバーが使える）や数字，赤字で示した部分はcanvasで描画するために必ず書く書き方

<canvas id="my_canvas" width="200" height="100"></canvas>
<script type="text/javascript">
abc1 = document.getElementById("my_canvas");
image1 = abc1.getContext("2d");
image1.strokeRect(20,10,180,90);
</script>

これにより，次の図1が描かれます．

- 図1 -

（解説）
　はじめ，width="200" height="100"で確保されたcanvasに対して，x座標が20（ピクセル），y座標が10（ピクセル）の点を左上端として，横幅170（ピクセル），縦幅80（ピクセル）の長方形を描きたいものとします．

document.getElementById("canvasのid識別子");

により，idで識別されるcanvas要素を取得します．
　次に，canvas要素にはビルドイン・オブジェクト（ブラウザに，あらかじめ組み込まれているオブジェクト）となっている描画コンテキスト（コンテキストは直訳すれば文脈であるが，単なるテキストが文字だけから成るものを表すのに対して，コンテキストは文字以外に大きさや色などの画像も含むデータ形式と考えるとよい．）が定義されているので，このオブジェクトを次の書き方で呼び出す．なお，canvasで利用できるグラフィックスには2次元のものと3次元ものがあり，2次元のものを使うときは"2d"と書く

canvasのid識別子.getContext("2d");

　最後に，描画コンテキストにあらかじめ定義されてる長方形（Rectangle）を描くメソッドを次の形で書く．

描画コンテキスト識別子.strokeRect(x1,y1,width1,height1);

　長方形を描く：描画コンテキスト識別子.strokeRect(x1,y1,width1,height1)は，長方形：描画コンテキスト識別子.rect(x1,y1,width1,height1)，と描く：描画コンテキスト識別子.stroke()に分けて書くことができます．
x1,y1は左上端の頂点ですが，3番目，4番目の引数は，右下端の頂点の座標ではなく，それぞれ横幅と縦幅です．
　この例では，width="200" height="100"で確保されたcanvasの左上端が(0,0)となるので，strokeRect(20,10,170,80)では，左と上に余白ができます．また，描く長方形の横幅が170，縦幅が80なので，右下端の座標は(190,90)になります．…特に別の指定をしない限り，x座標は右に行くほど大きくなり，y座標は下に行くほど大きくなるようになっています．…数学で使う座標系とは違っています．
　もし，最初に確保したcanvasのサイズ200×100の外に出るような座標や幅を指定した場合には，単にはみ出す部分を無視して描画されます．次の図2は，上記の例と同様に，はじめ，width="200" height="100"で確保されたcanvasに対して，描画コンテキスト識別子.strokeRect(20,10,200,100);と書いた場合の結果で，右側と下側が切れていることが分かります．

- 図2 -

※HTMLとjavascriptの特徴として，ブラウザはファイルの上から順に読み込んでいくので，abc1 = document.getElementById("my_canvas");のようなjavascriptの実行コードが書かれているとき，"my_canvas"という識別子で示されるcanvasがまだ読み込まれていなければ，エラーになります．次のように書くとエラーになり，何も表示されません．…これに対して，関数やオブジェクトの定義が書かれているだけである場合は，その関数やオブジェクトを実際に呼び出す箇所よりも前に"my_canvas"という識別子で示されるcanvasが書かれていれば，問題ありません．

<script type="text/javascript">
abc1 = document.getElementById("my_canvas");
image1 = abc1.getContext("2d");
image1.strokeRect(20,10,170,80);
</script>
<canvas id="my_canvas" width="200" height="100"></canvas>

※javascriptのビルドイン・オブジェクトは，読んだときに意味が分かりやすいように命名されていますが，2つ以上の英単語を組み合わせて１つの名前にする場合，英小文字で書き始めて，2つ目以後は名前の綴りの区切りの箇所だけを英大文字で書くというスタイルが多い．

【例】 getElementById，getContext，strokeRect

3. 線の色を変えるには

　線の色は，デフォルト（既定値）では黒になります．
　この色を変更するには，

描画コンテキスト識別子.strokeStyle = "";

の書式で色を指定します．
　色は，

(1) "red","green","blue"などの名前で書く方法
(2) "#ff0000","#00ff00","#0000ff"のように#を付けて2桁ずつ16進数で書く方法

"f00","0f0","00f"のように1桁ずつの16進数で書いてもよい．

(3) "rgb(255,0,0)","rgb(0,255,0","rgb(0,0,255)"のようにrgb()関数に赤緑青の濃さを10進数で0〜255までの範囲で書く方法

"rgb(100%,0%,0%)","rgb(0%,100%,0%","rgb(0%,0%,100%)"のように百分率で書いてもよい．

などがあり，いずれでも指定できます．…上記の(1)(2)(3)は互いに同じ色を表します．
　次のように書くと，図3のように描画されます．

<canvas id="my_canvas3" width="200" height="100"></canvas>
<script type="text/javascript">
abc3 = document.getElementById("my_canvas3");

image3 = abc3.getContext("2d");
image3.strokeStyle = "green";
image3.strokeRect(5,5,160,70);

image4 = abc3.getContext("2d");
image4.strokeStyle = "#0000ff";
image4.strokeRect(10,10,165,75);

image5 = abc3.getContext("2d");
image5.strokeStyle = "rgb(255,0,0)";
image5.strokeRect(15,15,170,80);
</script>

- 図3 -

　色の指定をするときに，描画コンテキスト識別子.strokeStyleを描画コンテキスト識別子.strokeRect()よりも先に書くことが重要です．逆順では，単にデフォルトの黒線で描かれ，後から指定した色は無視されます．

4. 線の太さを変えるには

　線の太さは，

描画コンテキスト識別子.lineWidth

によって指定できます．何も指定しなかった場合のデフォルト（既定値）は1ですが，canvasでは細い線は半透明色で表示されます．ブラウザで実際に観察してみると，描画コンテキスト識別子.lineWidth = 1 のときは半透明色，描画コンテキスト識別子.lineWidth = 2,4,6,.. のときは指定通り，描画コンテキスト識別子.lineWidth = 3,5,7,.. のときは外側が半透明に表示されます．
　つぎの例は，各々描画コンテキスト識別子.lineWidth = 1,2,3,4の場合の表示を示しています．

- 図4 -

5. 塗りつぶしと中抜き

長方形の内部を塗りつぶすには，

描画コンテキスト識別子.fillRect(x1,y1,width1,height1)

と書きます．
デフォルトでは黒に塗りつぶされますが，塗りつぶす色を指定するには

描画コンテキスト識別子.fillStyle = "カラーコード"

と書きます．カラーコードの部分は，4.で述べた線の色(1)〜(3)他が使えます．
　次の図5は，初めに黒で塗りつぶし，その中を青で塗りつぶし，さらにその中を透明にしたものです．

<canvas id="my_canvas5" width="200" height="100"></canvas>
<script type="text/javascript">
abc5 = document.getElementById("my_canvas5");
image5 = abc5.getContext("2d");
image5.fillRect(20,10,170,80);
image5.fillStyle = "blue";
image5.fillRect(30,20,150,60);
image5.clearRect(40,30,130,40);
</script>

- 図5 -