elaine.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 img7 = canvas.toDataURL("image/png");
			console.log(img7);
			//var img = ctx.toDataURL("image/png");

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

			$(".photo").html('<img src="'+img7+'"/>');
        }
 }
 //-----------------------------
    
//-----------------------------
    
//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);
             var canvas = $("#canvas")[1];
			var img8 = canvas.toDataURL("image/png");
			console.log(img8);
			//var img = ctx.toDataURL("image/png");

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

			$(".photo").append('<img src="'+img8+'"/>');
        }
       
}
// -----------------------------------   
   
var img2 = new Image;
    img2.src = URL.createObjectURL(e.target.files[2]);
    img2.onload = function() {
        
        ctx.drawImage(img2, 350, 0,350,312);
        
        var canvas = $("#canvas")[2];
			var img9= canvas.toDataURL("image/png");
			console.log(img9);
			//var img = ctx.toDataURL("image/png");

			$(".photo").append('<img src="'+img9+'"/>');
        
        
       
}    
        
}

-------------------------------

<input type="file" id="input" multiple/>
<canvas width="710" height="408" id="canvas" > </canvas>
<div class="photo" >
    
</div>