JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<textarea id="txt">Hello
World!</textarea>
<input type="button" id="btn" value="ok"></input><br/>
<canvas id="target" style="border:1px solid #ddd;"></canvas>

JavaScript

$(document).ready(function () {
    $('#btn').click(function () {
        draw($('#txt').val());
    });
});

function draw(txt) {
    function getTextFor(text, font, color, size) {
        return new fabric.Text(text, {
            fontFamily: font || 'Sans Serif',
            fontSize: size || '16',
            fill: color || 'black',
            originX: 'center',
            textAlign: 'center',
            top: 15,
        });
    };

    function getBorderFor(text) {
        var border = new fabric.Rect({
            width: Math.max(50, text.width + (2 * 10)),
            height: Math.max(20, text.height + (2 * 5)),
            top: 10,
            fill: 'white',
            stroke: 'black',
            strokeLineJoin: 'round',
            strokeWidth: 1,
        });
        border.setGradient('fill', {
            x1: -10,
            y1: -20,
            x2: 5,
            y2: 10,
            colorStops: {
                0: '#ddd',
                1: '#fff',
            }
        });
        return border;
    };

    function getStakeFor(border) {
        var stake = new fabric.Rect({
            width: 4,
            height: 30,
            top: border.top + border.height + 1,
        });
        stake.setGradient('fill', {
            x1: 0,
            y1: 0,
            x2: 5,
            y2: 0,
            colorStops: {
                0: '#FF8F59',
                1: '#5E3521',
            }
        });
        return stake;
    };


    // Text
    var text = getTextFor(txt);

    // Border
    var border = getBorderFor(text);

    // Stake
    var stake = getStakeFor(border);

    // Draw
    var canvas = new fabric.StaticCanvas('target');
    canvas.setDimensions({
        width: border.width + 20,
        height: border.height + stake.height + 20,
    });


    canvas.add(border);
    canvas.centerObjectH(border);

    canvas.add(text);
    canvas.centerObjectH(text);

    canvas.add(stake);
    canvas.centerObjectH(stake);

   ...