JSFiddle - React, Tailwind, and code Playground

by Gisele Lima

HTML

<script src="https://rawgit.com/sapics/fabric.js/master-build/dist/fabric.js"></script>
<canvas id="c" width="500" height="400"></canvas>
<input type="color" id="color" />
<select id="font_size">
    <option value="10">10</option>
    <option value="12">12</option>
    <option value="14">14</option>
    <option value="16">16</option>
    <option value="18">18</option>
    <option value="38">38</option>
    <option value="48">48</option>
</select>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

var canvas = new fabric.Canvas('c');
var text = new fabric.IText('Left Aligned: Lorem ipsum.',{fontSize:16,left:20,top:20});
canvas.add(text).setActiveObject(text);

addHandler('font_size', function(obj) {
      setStyle(obj, 'fontSize', this.value);
    }, 'onchange');
addHandler('color', function(obj) {
      setStyle(obj, 'fill', this.value);
    }, 'onchange');
    
    
function setStyle(object, styleName, value) {
    if (object.setSelectionStyles && object.isEditing) {
        var style = { };
        style[styleName] = value;
        object.setSelectionStyles(style).setCoords();
    }
    else {
        object[styleName] = value;
    }
    canvas.renderAll();
};
function  getStyle(object, styleName) {
    return (object.getSelectionStyles && object.isEditing)
    ? object.getSelectionStyles()[styleName]
    : object[styleName];
}
function addHandler(id, fn, eventName) {
    document.getElementById(id)[eventName || 'onclick'] = function() {
        var el = this;
        if (obj = canvas.getActiveObject()) {
            fn.call(el, obj);
            canvas.renderAll();
        }
    };
}