用javascript中的图像填充画布，而不具有重叠图像

要用几个图像填充画布，我使用以下代码：

<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>

函数loadImages（源、回调）{
var图像={}；
var loadedImages=0；
var numImages=0；
//获取源的数量
用于（源中的var src）{
numImages++；
}
用于（源中的var src）{
图像[src]=新图像（）；
图像[src].onload=function（）{
如果（++LoadeImage>=numImages）{
回调（图像）；
}
};
图像[src].src=源[src]；
}
}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
装配容器（帆布）；
风险值来源={
达什瓦德：'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
尤达：'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
};
加载图像（源、函数（图像）{
context.drawImage（images.darthVader，0,0）；
context.drawImage（images.yoda，0,0）；
});
功能安装容器（画布）{
canvas.style.width='100%'；
canvas.style.height='100%'；
canvas.width=canvas.offsetWidth；
canvas.height=canvas.offsetHeight；
}

虽然这实际上是用图像填充画布，但我无法定位图像以避免重叠。我事先不知道照片的大小。是否有任何库或框架可以轻松为我做到这一点，或者我可以走什么方向

---

画布的大小有限，因为它位于父html元素中。

只需跟踪图像的累积宽度即可

然后在累积宽度的右侧绘制下一个图像

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...
});

---

请更好地格式化代码，删除那些缩进。我的画布大小有限。它受其父html元素的限制。我刚才在我的问题中补充了这一点。我的意思是，我不能超过父元素的大小，否则图像就看不见了。同样的概念也适用！所以也要记录你使用的最大高度。如果您的下一张图像将超过画布宽度，则将nextX重置为零，并在低于上一个最大高度的位置开始绘制。如果允许对图像进行洗牌，则您可以使用“装箱”算法来适应有限画布区域内的最大矩形：