JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="file" >
    <canvas id="c" width="500" height="500" >
    </canvas>
    
<img>

JavaScript

var file = document.getElementById( "file"),
    canva = document.getElementById( "c" ),
    ctx = canva.getContext( "2d" );

file.addEventListener( "change", function ( e ) {

        var reader = new FileReader ();

        reader.onload = function () {
            var img = new Image();
            img.onload = function () {
                ctx.clearRect( 0, 0, canva.width, canva.height );
                ctx.drawImage( this, 0,0, canva.width, canva.height  );            
            }
            img.src = reader.result;
        };

        reader.readAsDataURL( e.target.files [0] );

    } );