JSFiddle - React, Tailwind, and code Playground

by mvprzy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>

JavaScript

(function () {

    var canvas = new fabric.Canvas('myCanvas', {});

    var mytext = new fabric.IText('Type some Text', {
        fontFamily: 'Arial',
        left: 100,
        top: 100
    });

canvas.add(mytext);


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 () {
    mytext.fontFamily = fontControl.val();
    canvas.renderAll();
});

})();