填充畫布的JavaScript圖像，而不必重疊圖像

Question

爲了填補畫布與幾個圖片我用下面的代碼：

<canvas id="myCanvas"></canvas> 
<script> 
    function loadImages(sources, callback) { 
     var images = {}; 
     var loadedImages = 0; 
     var numImages = 0; 
     // get num of sources 
     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('myCanvas'); 
    var context = canvas.getContext('2d'); 
    fitToContainer(canvas); 
    var sources = { 
     darthVader : 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg', 
     yoda : 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg' 
    }; 

    loadImages(sources, function(images) { 
     context.drawImage(images.darthVader, 0,0); 
     context.drawImage(images.yoda, 0, 0); 
    }); 

    function fitToContainer(canvas) { 
     canvas.style.width = '100%'; 
     canvas.style.height = '100%'; 
     canvas.width = canvas.offsetWidth; 
     canvas.height = canvas.offsetHeight; 
    } 
    </script> 

雖然這是事實，填充圖像的畫布，我不能夠放置圖像以避免重疊。我不會提前知道圖片的大小。是否有任何圖書館或框架可以輕鬆地爲我做這件事或我可以走什麼方向？

畫布的大小有限，因爲它在父html元素中。

Answer 1

只需跟蹤圖像的累積寬度。

那麼接下來的圖像繪製到累積寬度

loadImages(sources, function(images) { 
    var nextX=0; 
    context.drawImage(images.darthVader, nextX,0); 
    nextX+=images.darthVader.width; 
    context.drawImage(images.yoda, nextX, 0); 
    nextX+=images.yoda.width; 
    // ...and so on... 
});