jerry.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);
        }
        else{
            ctx.drawImage(img, 0,0,350,156);
        }
 }
 //-----------------------------
    
//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);
        }
       
}
// -----------------------------------   
    //3rd images
    var img2 = new Image;
    img2.src = URL.createObjectURL(e.target.files[2]);
    img2.onload = function() {
        if(input.files.length == '2'){
        ctx.drawImage(img2, 350, 0,350,312);
        }
        else{
            ctx.drawImage(img2, 350,0,350,312);
        }
       
}
  
}


-----------------------------html----------

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