JSFiddle - React, Tailwind, and code Playground

by Kelvin Russell

HTML

<canvas id='textCanvas' height=200 width=200></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>
<img id="scream" src="http://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream" width="220" height="277">

CSS

canvas{
    border: 1px black solid;
}
#textCanvas{
    display: none;
}

JavaScript

var tCtx = document.getElementById('textCanvas').getContext('2d'),
    imageElem = document.getElementById('image');

document.getElementById('text').addEventListener('keyup', function (){
    tCtx.fillText(this.value, 0, 10);
    imageElem.src = tCtx.canvas.toDataURL();
    console.log(imageElem.src);
}, false);