CanavsはHTML5から導入された新しいタグで、JavaScriptでこの中に描画する下地を作ることが出来ます。
Canvasタグの使い方
単体で仕事をするわけではないので記述はいつもの感じです。divやtableと同じように「場」を設定します。
<canvas></canvas>
Canvasはデフォルトでheight:150px、width:300pxのサイズを持ちます。自分でwidthやheigthを設定することももちろん可能です。ここではborderとidだけ設定して、まずは領域を確保します。
ボタンを押すと四角形が描画されます。
現在は大体のブラウザに対応しているはずですが、IE9以前などではCanvasは表示されないようです。代替コンテンツを用意する場合は、Canvasタグの内側に記述すれば、Canvasが表示できない場合のみ表示されます（上のキャンバスにも埋め込んでいます。「代替コンテンツ」がボタンの上に表示されているなら、あなたが今使っているブラウザはCanvas未対応です）。
<canvas id = "testcanvas">（任意で代替コンテンツ）</canvas>CanvasにJavaScriptで描画する下準備
JavaScriptから描画するには、まず「何に描画するのか」を決める必要があります。そのためにhtml側でIDを指定していますので、これをJS側で取得します。
//JavaScript_canvasを変数「cvs」に代入
var cvs = document.getElementById("testcanvas");getElementById()はhtmlの中で指定したIDを持つ要素を見つけ出し、その内容に干渉するために要素を変数に代入するメソッドです。このメソッドについて詳しく知りたい方は、下記をご参照ください。
さらに、キャンバスを2次元画像として使うのか、3次元画像として使うのか、みたいなのを決めないといけません。Canvasはなんでも描けるわけではなく、描く内容によって下地（描画コンテキスト）を変更する必要があります。
とりあえず2次元で描きたいので、次のように指定します。
要素.getContext(‘2d’);
ややこしいんですが、先ほど取得したCanvasタグを代入した変数に2dの下地をあてがったものにまた別の名前をつけます。
var byouga = cvs.getContext('2d');こうして完成したbyougaに対してメソッドを用いることで、ようやくキャンバスに変更が及ぼされます。
CanvasにJavaScriptで描画してみる
読み取ったキャンバスに対して描画するには、ここでは次のようなメソッドを使います。
fillRect(x,y,w,h);
x=始点（横） y=始点（縦） w=width h=height
Canavsの左上から見て横に何pxか、縦に何pxか、そこから横にどの程度のサイズか、縦にどの程度のサイズかを描画し、四角形の位置とサイズを決定します。
まとめると、今回使用したコードは次のようになります(ここではhtmlの中にJavaScriptを書いてますが、外部ファイルに書く方法が推奨されます)。
<！-- html -->
<canvas id="testcanvas" style="border: solid 1px black;">代替コンテンツ</canvas>
<input type="button" value="実行" onclick="canvasClick();"/>
//JavaScript
<script>
function canvasClick() {
//htmlのcanvas要素をJS側のcvsに代入
var cvs = document.getElementById('testcanvas');
//2dコンテキストを当てはめたcvsをbyougaに代入
var byouga = cvs.getContext('2d');
//byougaに対して四角形（矩形）を描画
byouga.fillRect(30, 20, 50, 30);
}
</script>Canvasタグの設置と描画の基本については以上です。
コメント