<canvas id="c1" width="320" height="480"></canvas>

 
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
 
ctx.clearRect(0,0,320,480);//消す
ctx.save();//状態を保存
 
 
//線を描くと宣言。
ctx.beginPath();
 
//40x40のグリッドを設定
for(i=0;i<=12;i++){
	ctx.moveTo(40*i, 0);
	ctx.lineTo(40*i, 480);
	ctx.closePath();
	ctx.moveTo(0, 40*i);
	ctx.lineTo(320, 40*i);
	ctx.closePath();
}
 
//グリッドを描画
ctx.stroke();
 
 // Imageオブジェクトを生成
var img = new Image();
 
//80x80の画像のパス。
img.src = "img/bitmap80x80.gif?" + new Date().getTime();
 
//画像が読み込み完了したら、X：120、Y：160に配置
img.onload = function() {
	ctx.drawImage(img, 120, 160);
}