JSFiddle - React, Tailwind, and code Playground

by s sc

HTML

<canvas id='textCanvas' height=20></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>

CSS

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

JavaScript

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

document.getElementById('text').addEventListener('keyup', function (){
		ctx.font = "30px Verdana"
    ctx.canvas.width = ctx.measureText(this.value).width;
    ctx.fillStyle = 'red';
ctx.strokeStyle = 'green'
ctx.lineWidth = 3;
ctx.font = '90px verdana';
ctx.fillText('Q', 50, 100);
ctx.strokeText('Q', 125, 100);
ctx.fillText('Q', 200, 100);
ctx.strokeText('Q', 200, 100);
    ctx.fillText(this.value, 0, 10);
    imageElem.src = ctx.canvas.toDataURL();
    console.log(imageElem.src);
}, false);