JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div>
    <canvas id="logo" />
</div>

JavaScript

function drawLogo() {
    var c = $('#logo');
    var ct = c.get(0).getContext('2d');
    c.attr('width', 970);
    c.attr('height', 500);
    c.css('width', '100%');
    c.css('height', '100%');
    var x = c.attr('width') / 2;
    var y = c.attr('height') / 2;
    var text = 'Hello Worlds';
    var fontsize = 300;
    do {
        fontsize--;
        ct.font = fontsize + "px 'Verdana'";
    } while (ct.measureText(text).width > c.attr('width'))
    ct.textBaseline = "middle";
    ct.textAlign = 'center';
    ct.fillText(text, x, y);
}

setTimeout(drawLogo, 1000);