将图片放在画布上

Question

我的代码正在串联图像。如果指定输入2，然后指定1，则1将阻塞第2部分，如果按顺序进行输入，则2变为1旁边（应如此）。我不知道在加载2然后1、1没有重叠并向后推2时该怎么做

     let canvas = document.getElementById('canvas');
     let context = canvas.getContext('2d');
     let uploadedFile = document.getElementById('uploaded-file');
     let uploadedFile2 = document.getElementById('uploaded-file2');


window.addEventListener('DOMContentLoaded',initImageLoader);



    function initImageLoader(){
 uploadedFile.addEventListener('change',handleManualUploadedFiles);
uploadedFile2.addEventListener('change',handleManualUploadedFiles);

    function handleManualUploadedFiles (ev){
        let file = ev.target.files[0];
        handleFile(this, file);
    }
 }
    let firstWidth=0;
   let secondwidth=0;
 function handleFile (input, file){
let imageType = /image.*/;

if(file.type.match(imageType) ){
    let reader = new FileReader();
    reader.onloadend = function(event) {
        let tempImageStore =new Image();
        tempImageStore.onload = function(ev) {


           let nWidth= (ev.target.width*canvas.height)/ev.target.height;
           if(input.id==="uploaded-file2"){
           secondWidth=nWidth;
           }
           else {
            firstWidth=nWidth;
           }


            context.drawImage(ev.target,input.id==="uploaded- 
        file2"&&firstWidth!==0?firstWidth:0,0,nWidth,canvas.height);
            console.log(firstWidth,secondwidth);
        }
        tempImageStore.src = event.target.result; 
    }
    reader.readAsDataURL(file);
}

}