Javascript 在画布上绘制多个图像并保存到图像

我正在尝试构建一个构造器，您可以在其中应用多个图像，画布上的texxt，然后将所有图像保存在一个图像中

我无法使它与多个图像一起工作

这是我从以下代码中获取的代码：

有人能告诉我为什么在我尝试通过循环绘制图像时它不起作用吗？

函数loadImagessources，回调{ var图像=[]； var loadedImages=0； var numImages=0； //获取源的数量 fori=0；i=numImages{ 回调图像； } }; 图像[i].src=sources[i]； } } var canvas=document.getElementById'myCanvas'； var context=canvas.getContext'2d'； //风险值来源={ //darthVader:“/image/CategorieVerkeersborden/Verboden.jpg”， //尤达：“/image/CategorieVerkeersborden/Funborden.jpg” //}; 变量源=[]；//我需要动态地将值添加到该数组中 来源，推http://pngimg.com/uploads/grass/grass_PNG10866.png'; 来源，推http://pngimg.com/uploads/street_light/street_light_PNG11542.png'; 来源，推http://pngimg.com/uploads/pokeball/pokeball_PNG34.png'; $document.readyfunction{ loadImagessources、functionimages{ imageElem=document.getElementById'image'； 对于i=0；i它画在同一个位置，恐怕不是这样。。。。事实上，图像是堆叠在彼此之上的，这也是我想要的——这将是thansparent png的，它应该是一个在另一个之上的，排序图像构造函数。但问题是现在两张图片都是相同的，上次点击的图片。所以不是图1和图2，而是图1和图1或图2和图2。这也是一件奇怪的事情。它只工作两次。当我第三次单击按钮时，它停止绘制。“图像不会在一个位置改变它的绘图，你也可以看到背景png图像，”一个男人补充道，“你说得对。”。它画得很好。我的问题还在于，通过重新绘制，它的绘制顺序与添加到资源数组中的顺序相同。。。愚蠢的人，可能会时不时地停下来帮忙-

   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');

        });
     }); 


  });