JSFiddle - React, Tailwind, and code Playground

by Edgar KAMDEM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<canvas id="c" width="500" height="400" style="border:1px solid #000"></canvas>

<br /><br />
<div class="controls">
    <p>
        Text color
        <input type="color"
               id="text-color"
               data-type="color"/>
    </p>
    <p>
        Text background color
        <input type="color"
               id="bg-color"
               data-type="color"/>
    </p>
</div>

JavaScript

var canvas = this.__canvas = new fabric.Canvas('c');

        var itext = new fabric.IText('This is a IText object', {
            left: 100,
            top: 150
        });

    $('#bg-color').change((e) => {
        let obj = this.__canvas.getActiveObject();
        let $this = $(e.currentTarget);
        obj.set("textBackgroundColor", $this.val());
        canvas.renderAll();
    });

    $('#text-color').change((e) => {
        let obj = this.__canvas.getActiveObject();
        let $this = $(e.currentTarget);
        obj.setColor($this.val());
        //obj.textBackgroundColor =$this.val();
        canvas.renderAll();
    });


    canvas.add(itext);