canvas上に複数の画像を複数個ランダムな場所に配置する方法

Question

canvas上に複数の画像を複数個ランダムな場所に配置する方法を教えてください。
canvasのサイズは横１３００px 縦７００pxです。
背景画像も同上です。
背景画像の上に 横２００px 縦１００px程度の大きさの別の画像を
複数の画像種類、複数個、ランダムな場所に配置したいのですが、
表示されているすべての画像がわかるようにコンソールにだしているのですが、
配置されている画像とコンソールにでている枚数が合いません。

ctx.drawImage(imgGazo,100,100);
今は描画する座標の位置を１００，１００で固定にしてしまっていますが、
ここをランダムに枠内にうまく収めるような方法も教えていただけますでしょうか。

var canvas = document.getElementById('ca');
var ctx = canvas.getContext('2d');

imgArr = [
			"画像url1",
			"画像url2",
			"画像url3",
];

document.addEventListener("DOMContentLoaded",function(){
	draw();
});

function draw(){

	var backimg = new Image();
	backimg.src ="背景画像";

	backimg.onload = function(){
	ctx.drawImage(backimg,0,0);
	}


for(var i = 0; i < randomNm(1,10); i++){

		var imgGazo = new Image();
		var imgNo = Math.floor(Math.random()*imgArr.length);

		imgGazo.src = imgArr[imgNo]

		imgNeko.onload = function(){
		ctx.drawImage(imgGazo,100,100);
	}
}

function randomNm(min,max){

	return Math.floor( Math.random() * (max + 1 - min) ) + min;
}

Answer 1

「配置されている画像とコンソールにでている枚数が合いません」
背景画像の読み込みが完了する前に小さな画像の描画へ処理が移っている為、枚数が合わないものと思います。
背景画像のonloadが完了したら小さな画像の描画へ移るようにします。

function draw() {

	//省略

	backimg.onload = function(){
		ctx.drawImage(backimg,0,0);
		drawMini();
	}
}

function drawMini() {
	for(var i = 0; i < randomNm(1,10); i++){

		//省略

	}
}

なお、小さな画像の配置位置は以下の様に求めます。

x = Math.floor(Math.random() * (1300 - 200 + 1));
y = Math.floor(Math.random() * (700 - 100 + 1));

Comments

[4443g]

ありがとうございました。
上手く動作いたしました。