Я хочу создать изображение Canvas из нескольких изображений в массиве из моего запроса ajax; для этого я пытаюсь запустить цикл, ноdrawImage не работает с циклом.

Затем я пробую функцию, и вызвал эту функцию в цикле, но происходит то же самоеdrawImage не работает с этим

ниже я упомянул весь код один с функцией один с циклом и один со статической информацией вdrawImage который в настоящее время работает.

Буду очень признателен, если кто-нибудь из вас подскажет, как мне это исправить.

Статический код DrawImage, который отлично работает

function loadImages(sources, callback, imagesrc) {
        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 canvas = document.getElementById('product-image');

      canvas.height = (jQuery(window).height()) -120;
      canvas.width = canvas.height * 0.75;
      var heightscreen = (jQuery(window).height()) -120;
      var canvasheight = heightscreen;
      var canvaswidth = canvas.height * 0.75;
      canvaswidthdiv4 = 0;
      var widthNeeded = canvasheight * 0.75;

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

// THIS IS A DUMMY ARRAY SAME AS COME IN AJAX RESPONSE  
        var sources = 
        {        
        Slim_Fit: "http://localhost/plugindev/wp-content/uploads/2015/08/slimFit.png",
        Inside_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/maincolar.png",
        Outside_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/outer_collar1.png",
        Main_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/inner_collar11.png"
        };



      loadImages(sources, function(images) 
      {

        context.drawImage(images.Slim_Fit, canvaswidthdiv4, 55, widthNeeded, canvasheight);  
        context.drawImage(images.Inside_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);
        context.drawImage(images.Outside_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);
        context.drawImage(images.Main_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);

      });

Ниже приведены поправки, которые я использую для функции, но не работает

 loadImages(sources, function(images) 
  {
jQuery.each( sources, function( key, value ) {

 DrawImage(key, images );

  });

  });

function DrawImage(keyname,images){

context.drawImage(images.keyname, canvaswidthdiv4, 55, widthNeeded, canvasheight);      
        }

Ниже приведены поправки, когда я использую цикл для рисования, но это не работает, а

 loadImages(sources, function(images) 
  {
jQuery.each( sources, function( key, value ) {

 context.drawImage(images.key, canvaswidthdiv4, 55, widthNeeded, canvasheight);

  });

  });

Пожалуйста помоги!