JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="400" height="200" style=" border:1px solid #d3d3d3;"></canvas>
<br />
<button>Save Image</button>

JavaScript

window.onload = function () {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var button = document.getElementsByTagName("button")[0];
    var imageObj = new Image();
    imageObj.onload = function () {
        context.drawImage(imageObj, 0, 0);
        context.font = "40pt Calibri";
        context.fillText("My TEXT!", 50, 100);
        context.font = "20pt Calibri";
        context.fillStyle = "red";
        context.fillText("Tesr", 50, 200);
    };
    imageObj.src =...