複数のCanvasに別々の画像をそれぞれロードしたい

Question

とあるHTMLページ上に、複数のCanvas要素を配置しています。
そのそれぞれののCanvasに別々の画像をロードしてやりたいんですが、できません。
例示コードだと一番最後のCanvasにのみ画像がロードされます。
※ロードされる画像自体は正しいです。

たぶんオブジェクトの指定かイベントの指定＆動作タイミングだと思うんですが、なかなかうまく行かず…
ご教示ください。

function restoreCanvas() {
    if ($("#HiddenFieldImages").val() !== "") {
        var imageSource = JSON.parse($("#HiddenFieldImages").val());
        for (var canvasId in imageSource) {
            if (document.getElementById(canvasId) != null) {
                var img = new Image();
                img.src = imageSource[canvasId];
                img.onload = function () {
                    var c = $("#" + canvasId).get(0);
                    var ct = c.getContext("2d");
                    ct.drawImage(img, 0, 0, c.width, c.height);
                };
            }
        }
    }
}

補足

• HiddenFieldImagesはinput type="hidden"な要素です
• ここに連想配列で生画像データを格納してあります
• KeyがCanvasのID、ValueがBase64生画像データです

Answer 1

for が終わってから onload が動くので、canvasIdが最後のもので固定されます。即時関数で処理するとかどうでしょう。

( function () {
	img.onload = function () {
	    var c = $("#" + canvasId).get(0);
	    var ct = c.getContext("2d");
	    ct.drawImage(img, 0, 0, c.width, c.height);
	}
} )( canvasId );

Comments

[ShikaTech]

無事、意図したとおりの動作が確認できました。
「即時関数」なるものを初めて知りましたが、これは有用ですね。

```
(function (cid) {
var img = new Image();
img.src = imageSource[cid];
img.onload = function () {
var c = $("#" + cid).get(0);
var ct = c.getContext("2d");
ct.drawImage(img, 0, 0, c.width, c.height);
}
})(canvasId);
```