draw multiple images on canvas and save to image

Question

I'm trying to build a constructur where you can apply multiple images, texxt on canvas an then save all it in one image.

I cannot make it work with multiple images

this is the code I have the basis I took from the http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/:

   function loadImages(sources, callback) {

    var images = [];
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(i=0; i< sources.length; i++) {
      numImages++;
    }
    for(i=0; i< sources.length; i++) {
      images[i] = new Image();
      images[i].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[i].src = sources[i];
    }
  }



var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

  //var sources = {
  //  darthVader: '/image/CategorieVerkeersborden/Verboden.jpg',
  //  yoda: '/image/CategorieVerkeersborden/Funborden.jpg'
  //};

var sources = []; // I need to add the values to that array dynamically I

$(document).ready(function(){


    $('.add').click(function(){

        if ( $.inArray($(this).siblings('img').attr('src'), sources) == -1 ){
            sources[sources.length] = $(this).siblings('img').attr('src');

        }

        loadImages(sources, function(images) {

            imageElem = document.getElementById('image');


            for (i = 0; i< sources.length; i++){

                context.drawImage(images[i], 0, 0, 300, 200); // this is the part that doesn't work - it draws the last image in the array I guess

            }
    //context.drawImage(images.darthVader, 0, 0, 300, 200);
    //context.drawImage(images.yoda, 0, 0, 200, 150);

  // the above part works 

    imageElem.src = context.canvas.toDataURL('image/png');

        });
     }); 


  });

Could anyone tell why it does't work when I try to draw the images through the loop?

Answer 1

function loadImages(sources, callback) {

    var images = [];
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(i=0; i< sources.length; i++) {
      numImages++;
    }
    for(i=0; i< sources.length; i++) {
      images[i] = new Image();
      images[i].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[i].src = sources[i];
    }
  }



var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

  //var sources = {
  //  darthVader: '/image/CategorieVerkeersborden/Verboden.jpg',
  //  yoda: '/image/CategorieVerkeersborden/Funborden.jpg'
  //};

var sources = []; // I need to add the values to that array dynamically I
 sources.push('http://pngimg.com/uploads/grass/grass_PNG10866.png');
 sources.push('http://pngimg.com/uploads/street_light/street_light_PNG11542.png');
 sources.push('http://pngimg.com/uploads/pokeball/pokeball_PNG34.png');
$(document).ready(function(){




        loadImages(sources, function(images) {

            imageElem = document.getElementById('image');


            for (i = 0; i< sources.length; i++){

                context.drawImage(images[i], 0, 0, 300, 200); // this is the part that doesn't work - it draws the last image in the array I guess

            }
    //context.drawImage(images.darthVader, 0, 0, 300, 200);
    //context.drawImage(images.yoda, 0, 0, 200, 150);

  // the above part works 

    imageElem.src = context.canvas.toDataURL('image/png');

        });



  });
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="400" height="400"></canvas>

ctx.drawImage(image, dx, dy, dWidth, dHeight) More info

In canvas you are drawing the image at position (dx,dy) with image width (dWidth) and image height (dHeight). In your case start drawing position is (0,0) with all image width = 300 and height= 200, that's why its overlap all the image, and you are able to see the last Image only.