JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<label for="font-control">Font family:</label>
<select id="font-control" name="font-control">
    <option value="Arial">Arial</option>
    <option value="Times New Roman">Times</option>
</select>
<canvas id="myCanvas" name="myCanvas" width="500" height="335" style="border:1px dotted;float:left"></canvas>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

JavaScript

(function () {

    var canvas = new fabric.Canvas('myCanvas', {  }),
        message,
        text = new fabric.IText('Type some Text', {
            fontFamily: 'Arial',
            left: 100,
            top: 100,
        });

    canvas.add(text);
    canvas.renderAll();

    function textBoxChanged(e) {
        var target = e.target;
        message = target.value;
        drawScreen();
    }

    function updateControls() {
        textControl.value = canvas.getActiveObject().getText();
    }

    var fontControl = $('#font-control');
    $(document.body).on('change', '#font-control', function () {
        text.fontFamily = fontControl.val();
        canvas.renderAll();
    });

})();