JSFiddle - React, Tailwind, and code Playground

by sammy

HTML

<input type='text' id='foo'>

<canvas id='can' width='300' height='300'></canvas>

JavaScript

document.getElementById('foo').oninput = function(ev){
    render(ev.target.value);
}


function render(text){
    text = text || "SJ";
    text = text.toUpperCase();
    
    var canvas = document.getElementById('can');
    var ctx = canvas.getContext('2d');
    
    var canvasWidth = canvas.width,
        canvasHeight = canvas.height;
    
    
    ctx.fillStyle = "blue";
    ctx.fillRect(0,0,300,300);
    
    ctx.font = '150px Impact';
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "white";
    
    ctx.fillText(text, canvasWidth/2, canvasHeight/2);
}