複数選択した画像のキャンバスへの描画につい

質問

HTML5のタグを
<input type="file" id="fileInput" multiple />
として、

ファイル選択のonchageイベントで、
選択した画像をキャンバスに50pxずつずらして描画しようとしたところ、
選択ファイルが２つまでなら、うまく描画されますが、４つになると、何故か最後の
画像ファイルしか描画されません（１～３番目に選択した画像ファイルは描画されない）。

選択した画像ファイルをすべて表示するにはどうしたらいいのか教えてください。
宜しくお願いします。

コードは次のとおりです。

document.getElementById('fileInput').onchange = function() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");

var drwX = 0, drwY = 0;//描画初期位置
var files = this.files; // 選択されたファイルを取得

for (var i = 0; i < files.length; ++i) {
var file = this.files[i];
// 画像ファイル以外は処理中止
if (!file.type.match(/^image\/(png|jpeg|gif)$/))
continue;

var image = new Image();
var reader = new FileReader();

reader.onload = function(evt) {
image.onload = function() {
ctx.drawImage(image, drwX, drwY, 50, 50);
};
drwX += 50;//次の画像の描画位置を右へ50px
drwY += 50;//　　　　　　　　　　　　　　下へ50px
// 画像のソースに、ファイルのURLを設定
image.src = evt.target.result;
}
// 読み込んだデータをBase64でエンコードしURLへ
reader.readAsDataURL(file);
}
}

回答No.1

nekomikekamo · ベストアンサー

いくつかの処理の位置を変更すると上手くいくかと。
１．var image = new Image();は、reader.onload内で実行する。
２drwX、drwYの更新タイミングを、image.onloadに変更。

reader.onload = function(evt) {
var image = new Image();
image.onload = function() {
ctx.drawImage(image, drwX, drwY, 50, 50);
drwX += 50;//次の画像の描画位置を右へ50px
drwY += 50;//　　　　　　　　　　　　　　下へ50px
};

// 画像のソースに、ファイルのURLを設定
image.src = evt.target.result;
}
// 読み込んだデータをBase64でエンコードしURLへ
reader.readAsDataURL(file);

お礼

解決しました！！

var image = new Image();
を
reader.onload = function(evt)
内に移動することで解決しました。

有難うございました。