george.js

var input = document.getElementById('input');

input.addEventListener('change', handleFiles);

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    //first imagess
    var input = document.getElementById('input');
	alert(input.files.length);
    
     var img = new Image;
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
        if(input.files.length == '2'){
        ctx.drawImage(img, 0,0,350,312);
                var canvas = $("#canvas")[0];
    var img10=canvas.toDataURL("image/png");
    
			console.log('img10', img10);
			//var img = ctx.toDataURL("image/png");

			$("#photo").html('<img src="'+img10+'"/>');
             }
        else{
            ctx.drawImage(img, 0,0,350,156);
                var canvas = $("#canvas")[0];
    var img10=canvas.toDataURL("image/png");
    
			console.log('img10', img10);
			//var img = ctx.toDataURL("image/png");

			$("#photo").html('<img src="'+img10+'"/>');
            
        }
 }
 //-----------------------------
    
//-----------------------------
    
//2nd images    
    var img1 = new Image;
    img1.src = URL.createObjectURL(e.target.files[1]);
    img1.onload = function() {
        if(input.files.length == '2'){
        ctx.drawImage(img1, 350, 0,350,312);
           
        }
        else{
            ctx.drawImage(img1, 0,156,350,156);
           
        }
       
}
// -----------------------------------   
   
var img2 = new Image;
    img2.src = URL.createObjectURL(e.target.files[2]);
    img2.onload = function() {
        
        ctx.drawImage(img2, 350, 0,350,312);
        

}    
        



    
}


-----------------
<input type="file" id="input" multiple/>
<canvas width="710" height="408" id="canvas" > </canvas>
<div id="photo" >
    
</div>
-------------------
#photo{
    border: 1px solid black;
    width:510px;
    height: 300px;
}