JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>
 <input type="file"  id="myfile">

JavaScript

const canvas = document.getElementById('canvas');
function readURL() {
          var myimg = document.getElementById("source");
          var input = document.getElementById("myfile");
          if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
              drawimg(e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
          }
}

document.querySelector('#myfile').addEventListener('change',function(){
    readURL()
});

function drawimg(idata) {
  var img = new Image();
  img.onload = function(){
	  canvas.width = 300;
  	canvas.height = this.height*canvas.width/this.width;
	  const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0,0,canvas.width,canvas.height);
  };
  img.src = idata;
}