drawImageの描画順序の指定について
いつもお世話になっております。
drawImageメソッドを使用し、Canvasへ画像を描画するプログラムを作成しています。
画像は全部3枚あり、座標をずらしてすべて重ねて表示します。
画像のファイルサイズはすべて異なります。
画像描画のタイミングは選択中のセレクトボックスの項目に変更があった場合です。
この際、フォームの情報によって描画順序を決定します。
本題ですが、現在のコーディングですと、指定した描画順序のとおりに描画されません。
複数の画像に対してonloadを使用しており、画像の読み込みが完了した順番に描画
されているような気がします。指定したとおりに描画できる方法はないでしょうか？
・html
<canvas id=main width=160 height=160 style=border:1px solid gray></canvas>
<form>
<hr>
描画順序
<select name=order onChange=Main(this.form)>
<option value=0>1,2,3</p>
<option value=1>1,3,2</p>
<option value=2>2,1,3</p>
<option value=3>2,3,1</p>
<option value=4>3,1,2</p>
<option value=5>3,2,1</p>
</select>
</form>
・外部ファイル(js)
function Main(f)
{
var canvas = document.getElementById('main');
if (!canvas || !canvas.getContext) {
return false;
}
var Canvas = canvas.getContext('2d');
Canvas.clearRect(0, 0, 320, 240);
var Image1 = new Image();
var Image2 = new Image();
var Image3 = new Image();
if (f.order.value == 0) {
Image1.onload = function() {
Canvas.drawImage(Image1, 0, 0);
}
Image2.onload = function() {
Canvas.drawImage(Image2, 20, 20);
}
Image3.onload = function() {
Canvas.drawImage(Image3, 40, 40);
}
Image1.src = GetImageFileName(1);
Image2.src = GetImageFileName(2);
Image3.src = GetImageFileName(3);
}
else if (f.order.value == 1) {
Image1.onload = function() {
Canvas.drawImage(Image1, 0, 0);
}
Image3.onload = function() {
Canvas.drawImage(Image3, 20, 20);
}
Image2.onload = function() {
Canvas.drawImage(Image2, 40, 40);
}
Image1.src = GetImageFileName(1);
Image3.src = GetImageFileName(3);
Image2.src = GetImageFileName(2);
}
else if (f.order.value == 2) {
Image2.onload = function() {
Canvas.drawImage(Image2, 0, 0);
}
Image1.onload = function() {
Canvas.drawImage(Image1, 20, 20);
}
Image3.onload = function() {
Canvas.drawImage(Image3, 40, 40);
}
Image2.src = GetImageFileName(2);
Image3.src = GetImageFileName(3);
：（以降省略）
よろしくお願いいたします。
お礼
ご回答ありがとうございます。なるほどよくわかりました。