16*16を1タイルとして、スクリーンサイズは横720×縦640。マップチップは32×32。

CanvasタグのIDは「backscreen」と「picdrow」で２つ描画。

jsファイルでdocument.getElementById関数（引数はそれぞれのCanvasID）で適当な変数（今回は「canvas_backscreen」「canvas_picdrow」）にCanvasの要素を取得。

当該要素を格納した変数に対しgetContext('2d')（canvas.getContext('2d')）関数を使用することで、

2Dグラフィック描写のためのメソッドやプロパティを持つオブジェクトを変数「con_backscreen」「con_picdrow」に格納。

※今回は'2d'の引数を指定しているためだが、'webg1'とすれば3D関連のものとなる。

new Image()関数でimg変数用意。32*32の画像（マップチップ）を読み込んでおく。

ここで関数１：変数con_backscreenのfillStyle（図形塗りつぶし）を黒とし、fillrect（塗りつぶしし四角形）を横0*0から720*640で描画。

ここで関数２：変数con_picdrowのdrawImage（画像描画）で画像描画。今回は0,0と0,32の２タイルを描画した。