JSFiddle - React, Tailwind, and code Playground

by honnza

HTML

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

JavaScript

document.getElementById("input").addEventListener("change", function(){
  console.log("input changed");
	var reader = new FileReader();
  reader.addEventListener("load", function(){
    console.log("reader loaded");
  	var c = document.getElementById("canvas");
    var img = new Image;
    img.src = reader.result;
    c.width = img.width;
    c.height = img.height;
    var ctx = c.getContext("2d");
    ctx.drawImage(reader.result, 0, 0);
  })
})