JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<button id="remove">Remove the text</button>
<button id="changed">Change the text</button>
<button id="original">Original text</button>
<div id="wrapper">
    <img id="bkImage" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png" width=300 height=300>
    </canvas>
    <canvas id="canvas" width=300 height=300></canvas>
</div>

CSS

body {
    background-color: ivory;
    padding:20px;
}
#wrapper {
    position:relative;
    width:300px;
    height:300px;
}
#bkImage {
    position:absolute;
    top:0px;
    left:0px;
    border:1px solid green;
    width:100%;
    height:100%;
}
#canvas {
    position:absolute;
    top:0px;
    left:0px;
    border:3px solid red;
    width:100%;
    height:100%;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function drawText(text, fill, stroke) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = "123px verdana";
    ctx.fillStyle = fill;
    ctx.strokeStyle = stroke;
    ctx.lineWidth = 4;
    ctx.fillText(text, 10, 120);
    ctx.strokeText(text, 10, 120);
}

drawText("Hi!", "orange", "green");

$("#remove").click(function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});
$("#original").click(function () {
    drawText("Hi!", "orange", "green");
});
$("#changed").click(function () {
    drawText("Bye!", "purple", "yellow");
});