JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas">
  Sorry, canvas not supported
</canvas>
<!-- /canvas.offers -->

<div class="form">
  <div class="wrapper">


    <div id="area"></div>
    <!-- All rows here -->


    <input id="fileInput" type="file" />
    <a href="#" id="downloadImage">Download image</a>


  </div>
  <!-- /wrapper -->

</div>
<!-- /div.form -->

JavaScript

console.log('init');

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var lastImage;
var lastHeight = 0;
var lastWidth = 0;

var minImages = 2;
var imagesLoaded = 0;

function max(a, b) {
	if (a > b)
    return a;
  return b;
}

function addToCanvas(img) {
  
  // resize canvas to fit the image
  // height should be the max width of the images added, since we rotate -90 degree
  // width is just a sum of all images' height
  canvas.height = max(lastHeight, img.width);
  canvas.width = lastWidth + img.height;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (lastImage) {
  	ctx.drawImage(lastImage, 0, canvas.height - lastImage.height);
  }
  
  ctx.rotate(270 * Math.PI / 180); // rotate the canvas to the specified degrees
  ctx.drawImage(img, -canvas.height, lastWidth);
  
  lastImage = new Image();
  lastImage.src = canvas.toDataURL();
  lastWidth += img.height;
  lastHeight = canvas.height;
  imagesLoaded += 1;
}

function loadImage(src, onload) {
  var img = new Image();

  img.onload = onload;
  img.src = src;

  console.log(img);
  return img;
}


// Variable to store your files
var files;
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', imageLoader, false);

function imageLoader() {
  var reader = new FileReader();

  reader.onload = function(event) {
    var img = new Image();

    img.onload = function() {
			addToCanvas(img);
    }

    img.src = reader.result;
  }

  reader.readAsDataURL(fileInput.files[0]);
}

$.getScript('https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js', function () {
	$.getScript('https://rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js', function () {
  	$('#downloadImage').click(function () {
      canvas.toBlob(function(blob) {
          saveAs(blob, "merged_image.png");
      });
    });
  });
});

// create canvas

// Handle download generated image
// $('#downloadImage').click(prepareDownload(), false);

//...