JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<form>
    <input type="file" name="file" id="file" />
</form>

<canvas id="canvas" />

JavaScript

$('#file').on('change', function(ev) {

    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        reader = new FileReader;

    reader.onload = function(event) {
        var img = new Image;

        img.onload = function() {
            canvas.width = this.width;
            canvas.height = this.height;
            ctx.drawImage(this, 0, 0);
            ctx.font = "36pt Verdana";

            ctx.fillStyle = "black";
            ctx.fillText("Test Text", 42, 82);

            ctx.fillStyle = "white";
            ctx.fillText("Test Text", 40, 80);

        };

        img.src = event.target.result;
    };

    reader.readAsDataURL(ev.originalEvent.target.files[0]);

});