troubleshooting Question

load many images

Avatar of jagguy
jagguyFlag for Australia asked on
4 Comments1 Solution339 ViewsLast Modified:
In html5 canvas I can load 1 image. To load many images I look at this code
I am confused as to how this work with the callback

 loadImages(sources, function(images) {// where is function(images) to pass?

    <canvas id="myCanvas" width="578" height="200"></canvas>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
          images[src].src = sources[src];
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var sources = {
        darthVader: '',
        yoda: ''

    [b]  loadImages(sources, function(images) {[/b]
        context.drawImage(images.darthVader, 100, 30, 200, 137);
        context.drawImage(images.yoda, 350, 55, 93, 104);

Kishan Zunjare
Sr. Software Engineer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros