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 () {
        panelSmiley('target', {
            text: {
                text: $('#txt').val()
            },
            panel: {},
            stake: {},
            smiley: {}
        });
    });
});


var panelSmiley = function (target, options) {
    var _opt = {
        text: {
            text: options.text.text || 'Your text!',
            color: options.text.color || 'black',
            font: options.text.font || 'Sans Serif',
            size: options.text.size || '16',
        },
        panel: {
            background: options.panel.background || '#ffffff',
            border: options.panel.border || 'black',
        },
        stake: {
            color: options.stake.color || '#884c30',
        },
        smiley: {
            image: options.smiley.image || 'http://www.lexpage.net/static/images/smiley/smile.gif',
            offsetX: options.smiley.offsetX || 0,
            offsetY: options.smiley.offsetY || 0,
        }
    };

    var CST = {
        MARGIN_V: 5,
        MARGIN_H: 5,
        TEXT_PADDING_V: 5,
        TEXT_PADDING_H: 10,
        STAKE_HEIGHT: 25,
        STAKE_WIDTH: 4,
        BORDER_WIDTH: 1,
    };

    // Save the bears, save the global scopes
    (function () {
        var text = new fabric.Text(_opt.text.text, {
            fontFamily: _opt.text.font,
            fontSize: _opt.text.size,
            fill: _opt.text.color,
            textAlign: 'center',
            left: CST.TEXT_PADDING_H + CST.BORDER_WIDTH,
            top: CST.TEXT_PADDING_V + CST.BORDER_WIDTH,
        });

        var panel = new fabric.Rect({
            width: text.width + 2 * CST.TEXT_PADDING_H,
            height: text.height + 2 * CST.TEXT_PADDING_V,
            fill: _opt.panel.background,
            stroke: _opt.panel.border,
            strokeLineJoin: 'round',
            strokeWidth: CST.BORDER_WIDTH,
        });

        (function () {
            var c1 = new...