JSFiddle - React, Tailwind, and code Playground

by Muthu Pandian

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<select name="font-list" id="font-list">
    <option>Fontaas</option>
    <option>Damion</option>
    <option>Dynalight</option>
    <option>Caudex</option>
    <option>Comfortaa</option>
    <option>Esteban</option>
</select>
<canvas id="c" width="500" height="500"></canvas>
<br />

JavaScript

$(document).ready(function () {

    var canvas = new fabric.Canvas("c");
    canvas.backgroundColor = 'gray';
    document.getElementById("c").fabric = canvas;

    canvas.add(new fabric.Text('Google Fonts!!', {
        left: 200,
        top: 200,
        fill: 'white',
        
    }));

    canvas.renderAll();



    $("#font-list").change(function () {

        var font = $(this).val()
        console.log(font)
        $('head').append('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=' + font + '">')

        setTimeout(function(){
       // var canvas = document.getElementById("c").fabric;
        var activeObject = canvas.getActiveObject();
        activeObject.set({
            fontFamily: font,
            useNative: true
        });
            canvas.renderAll();},500);

    })

});