Canvasでは、図形の描画だけでなく、あらかじめ用意しておいたイメージファイルを読み込み、これをCanvasに描画することもできます。これは「drawImage」というメソッドとして用意されています。

drawImage( イメージ, 横位置, 縦位置 );

drawImage( イメージ, 横位置, 縦位置, 横幅, 縦幅 );

drawImage( イメージ, 横位置1, 縦位置1, 横幅1, 縦幅1,
           横位置2, 縦位置2, 横幅2, 縦幅2 );

ざっとこんな具合に呼び出します。最初に描画するイメージのオブジェクトを用意し、それ以降に位置や大きさなどの情報を渡してやることで、指定した位置やサイズにイメージをはめ込むように描くことができます。

問題は、第１引数の「イメージ」です。これは、「Image」というオブジェクトとして用意されています。オブジェクト作成後、読み込むソースを指定することで、そのソースからロードしたイメージをオブジェクトとして扱えるようになります。

Image 変数 = new Image();
[Image].src = イメージファイルのアドレス;

これでイメージロード後にdrawImageを呼び出せば、イメージが描画されます。

ただし！　問題は、「srcを指定しても、即座にイメージが使えるようになるわけではない」という点でしょう。ネットワークを経由してロードされるわけですから、完全にイメージがロードされ使えるようになるまでには時間がかかります。となると、ロードが完了したところで描画を行うように処理する必要があります。

[Image].onload = function(){ 描画の処理 }

Imageオブジェクトの「onload」プロパティに関数リテラルを設定することで、ロードが完了したら処理を実行させることができるようになります。このイベントを利用することで確実に描画を行えるようになるのです。

下に、簡単なサンプルをあげておきましょう。ここでは、同階層に用意した「image1.jpg」というイメージファイルをロードし、位置をずらしながら繰り返し描画を行っています。イメージ生成の処理部分を見てください。

image = new Image();
image.onload = function() {
    drawImg(context,image);
};
image.src = "image1.jpg";

new Imageし、onloadでロード後の処理を設定してからsrcにイメージファイルを指定しています。ここではonloadでdrawImgという関数を呼び出すようにしています。この関数にはコンテキストとImageオブジェクトが引数で渡され、これらを利用して読み込まれたイメージを描画します。

このように、イメージファイルを読み込んでの描画は、「ロード」と「描画」にタイムラグがあり、それぞれを別個に用意して処理する必要がある、という点は頭に入れておいてください。

function draw(id) {
	var canvas = document.getElementById(id);
	if (canvas == null)
		return false;

	var context = canvas.getContext('2d');
	context.fillStyle = "#EEEEFF";
	context.fillRect(0, 0, 400, 300);
	
	image = new Image();
	image.onload = function() {
		drawImg(context,image);
	};
	image.src = "image1.jpg";
}

function drawImg(context,image){
	for(var i = 0;i < 5;i++)
		context.drawImage(image,10 + i * 50,10 + i * 25,100,100);
}