canvasで透過pngを重ねて一枚の画像にしたい

Question

前提・実現したいこと

canvasで複数枚の透過pngを重ねて一枚の画像にしたいです（パーツごとに分かれているイメージ）

発生している問題

ボタンを押した地点で表示されるようにしているのですが、画像が透過されないです。ファイルはすべて透過で用意してある状態なのですが、うまく動作しません。一番最後に読み込まれた画像は一応表示されている状況です。

エラーなど

エラーは特に表立って吐いているわけではないので動作してはいるようです。

該当のソースコード

<div id="canvas_box">
        <div id="c_container">
            <canvas id="canvas" width="960" height="540">
                <script>
                    var hair_src = "/static/img/hair/hair_1.png"
                    var eyebrow_src = "/static/img/eyebrow/eyebrow_1.png"
                    var eye_src = "/static/img/eye/eye_1.png"
                    var mouth_src = "/static/img/mouth/mouth_1.png"
                    var pose_src = "/static/img/pose/pose_1.png"
                    var effect_src = "/static/img/effect/effect_1.png"
                    var lettering_src = "/static/img/lettering/lettering_1.png"
                    var deco_src = "/static/img/deco/deco_1.png"
                    var skeleton_src = "/static/img/skeleton/skeleton.png"

                    function canvas() {
                        var container = document.getElementById("c_container");
                        var canvas = document.getElementById("canvas");
                        var context = canvas.getContext("2d");

                        var source = [
                            skeleton_src,
                            deco_src,
                            lettering_src,
                            effect_src,
                            pose_src,
                            mouth_src,
                            eye_src,
                            eyebrow_src,
                            hair_src
                        ];

                        var images = [];
                        for (var i in source) {
                            images[i] = new Image();
                            images[i].src = source[i];
                            images[i].onload = function () {
                                context.drawImage(images[i], 0, 0);
                            }
                        }
                    }
                </script>
            </canvas>
        </div>

Answer 1

↓の直前で i を出力してみてください。多分、8が9回出力されると思います

context.drawImage(images[i], 0, 0);

onloadが発火する時点でloopが最後まで回りきってるためです

iを引数として渡してみてください

images[i].onload = (function (index) {
  return function() {
    context.drawImage(images[index], 0, 0);
  }
}(i));         

Comments

[Nano422]

上手く動作しました！ありがとうございます！
回りきっているのが原因でしたか…