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');

canvas.height = 400;
canvas.width = 800;


var img1 = loadImage('http://www.shsu.edu/dotAsset/0e829093-971c-4037-9c1b-864a7be1dbe8.png', main);
var img2 = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/266px-Ikea_logo.svg.png', main);

var minImages = 2;
var imagesLoaded = 0;

function main() {
  imagesLoaded += 1;
  
  canvas.height = max(img1.width, img2.width);
  canvas.width = img1.height + img2.height;

  if (imagesLoaded >= minImages) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    
    ctx.rotate(270 * Math.PI / 180); // rotate the canvas to the specified degrees

    ctx.drawImage(img1, -canvas.height, 0);

    //ctx.translate(canvas.height / 2, canvas.width / 2); // move to the center of the canvas
    
    ctx.drawImage(img2, -canvas.height, img1.height);

    // ctx.translate(-canvas.height/2,canvas.width/2); // move to the center of the canvas
    // ctx.rotate(90*Math.PI/180); // rotate the canvas to the specified degrees
    // ctx.drawImage(img2,-img2.width/2,-img2.width/2);

    ctx.restore(); // restore the unrotated context
  }
}

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

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() {
      // ctx.clearRect(0, 0, canvas.height, canvas.width);
      ctx.save();

      ctx.translate(0, 0); // move to the center of the canvas
      ctx.rotate(90 * Math.PI / 180); // rotate the canvas to the specified degrees
      ctx.drawImage(img, 0,...