notes/Load Multiple Images with a Function-RqnBQyUF.html

<!DOCTYPE HTML>
<html>
  <head>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="1200" height="800"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        function loadImages(sources, callback){
            var images = {};
            var loadedImages = 0;
            var numImages = 0;

            for(var src in sources){
                numImages++;
            }
            for(var src in sources){
                images[src] = new Image();
                images[src].onload = function(){
                    if(++loadedImages >= numImages){
                        callback(images);
                    }
                };
                images[src].src = sources[src];
            }
        }

        var sources = {
            tux : "http://www.iconlet.com/icons/cute-tux-icons/opensec-tux-mario-1732.png",
            rambo : "http://www.ps3hax.net/wp-content/uploads/2011/06/santang-rambo-tux-2036.png"
        };

        loadImages(sources, function(images){
            context.drawImage(images.tux, 100, 200);
            context.drawImage(images.rambo, 400, 200);
        });
    </script>
  </body>
</html>
syntax highlighted by Code2HTML, v. 0.9.1