JSFiddle - React, Tailwind, and code Playground

by Raynos

HTML

<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>

JavaScript

var URL = window.webkitURL || window.URL;

window.onload = function() {
    var input = document.getElementById('input');
    input.addEventListener('change', handleFiles, false);
}

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 20, 20);    
    }
    img.src = url;
    
}