JSFiddle - React, Tailwind, and code Playground

HTML

<div>Select an image file:
    <input type="file" id="fileInput">
</div>
<canvas id="fileDisplayArea"></canvas>

JavaScript

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');

fileInput.addEventListener('change', function (e) {

    var file = fileInput.files[0];
    var imageType = /image.*/;

    if (file.type.match(imageType)) {

        var reader = new FileReader();

        reader.onload = function (e) {

            var ctx = fileDisplayArea.getContext("2d");

            // create a new image from user selected file
            var img = new Image();
            img.src = reader.result;

            // set canvas size to image size
            fileDisplayArea.width = img.width;
            fileDisplayArea.height = img.height;

            // scale and draw image with offset
            ctx.drawImage(img, 0, 0);
        }
        reader.readAsDataURL(file);
    } else {
        alert("File not supported!");
    }
})