canvasで指定した順番で画像を表示する

canvas内で複数の画像を描画しようとした際に意図した表示にならないことがあったので、対応方法をメモしておきます。

サンプルコード

canvasに描画する画像パスを配列で用意して、for文で順々に読み込みます。

HTML

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

JavaScript

// canvasに表示する画像
var imgs = [
	'dog.jpg',
	'cat.jpg',
	'dolphin.jpg',
	'bird.jpg',
	'turtle.jpg'
];
var canvas = document.getElementById('canvas');
var ctx;
window.onload = function() {
	if(!canvas || !canvas.getContext) return false;
	ctx = canvas.getContext('2d');
	draw();
}

// canvasに画像を描画
function draw() {
	for (var i = 0; i < imgs.length; i++) {
		draw_image(i);
	}
}

// 各画像をcanvasに描画する処理
function draw_image(num) {
	var img = new Image();
	img.src = imgs[num];
	// 画像読み込み後に描画
	img.onload = function() {
		ctx.drawImage(img, (num * 80), (num * 40));
	}
}

うまくいかなかった場合のデモページ
何度かリロードして確認してみると、たまに意図しない重なり順になることがありました。(イルカと鳥の画像部分)

画像を読み込んでから描画するため、読み込む時間によって描画する順番が変わってしまうようです。

対応として、すべての画像が読み込み終わってから順々に描画するようにしました。

JavaScript

// canvasに表示する画像
var imgs = [
	'dog.jpg',
	'cat.jpg',
	'dolphin.jpg',
	'bird.jpg',
	'turtle.jpg'
];
var imgArr = [];
var imgCount = 0;
var canvas = document.getElementById('canvas');
var ctx;
window.onload = function() {
	if(!canvas || !canvas.getContext) return false;
	ctx = canvas.getContext('2d');
	draw();
}

// canvasに画像を描画
function draw() {
	for (var i = 0; i < imgs.length; i++) {
		draw_image(i);
	}
}

// 各画像をcanvasに描画する処理
function draw_image(num) {
	imgArr[num] = new Image();
	imgArr[num].src = imgs[num];
	// 画像読み込み後にカウントアップ
	imgArr[num].onload = function() {
		imgCount++;
		// すべての画像読み込みが完了した時
		if(imgCount >= imgs.length) {
			// 各画像を順番に描画
			for (var i = 0; i < imgs.length; i++) {
				ctx.drawImage(imgArr[i], (i * 80), (i * 40));
			}
		}
	}
}

指定した順番に画像を描画するデモページ
　

【参考サイト】

• HTML5のcanvas内に複数の画像を任意の順序で表示する