JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="http://websitesol.com/fabric.curvedText.js"></script>
<canvas id="c" width="400" height="200"></canvas><br/>
<input type="text" id="text" value="CurvedText" /><br>
Reverse : <input type="checkbox" name="reverse" id="reverse" /><br>
Radius : <input type="range"  min="0" max="100" value="50" id="radius" /><br>
Spacing : <input type="range"  min="5" max="40" value="20" id="spacing" /><br>
Color : <input type="color"  value="blue" id="fill" /><br>
<br>
<button id="convert">Convert Text/Curved</button>

CSS

canvas {
    border:1px solid #000;
}

JavaScript

$(function () {
    canvas = new fabric.Canvas('c');
	canvas.on('selection:cleared', onDeSelected);
	canvas.on('object:selected', onSelected);
	canvas.on('selection:created', onSelected);
    var CurvedText = new fabric.CurvedText('CurvedText',{
//        width: 100,
//        height: 50,
        left: 100,
        top: 100,
        textAlign: 'center',
        fill: '#0000FF',
        radius: 50,
        fontSize: 20,
        spacing: 20
//        fontFamily: 'Arial'
    });
    canvas.add(CurvedText).renderAll();
    canvas.setActiveObject(canvas.item(canvas.getObjects().length-1));
	$('#text').keyup(function(){
		var obj = canvas.getActiveObject();
		if(obj){
			obj.setText(this.value);
			canvas.renderAll();
		}
	});
	$('#reverse').click(function(){
		var obj = canvas.getActiveObject();
		if(obj){
			obj.set('reverse',$(this).is(':checked')); 
			canvas.renderAll();
		}
	});
	$('#radius, #spacing, #fill').change(function(){
		var obj = canvas.getActiveObject();
		if(obj){
			obj.set($(this).attr('id'),$(this).val()); 
		}
		canvas.renderAll();
	});
	$('#radius, #spacing').change(function(){
		var obj = canvas.getActiveObject();
		if(obj){
			obj.set($(this).attr('id'),$(this).val()); 
		}
		canvas.renderAll();
	});
	$('#fill').change(function(){
		var obj = canvas.getActiveObject();
		if(obj){
			obj.setFill($(this).val()); 
		}
		canvas.renderAll();
	});
    $('#convert').click(function(){
		var props = {};
		var obj = canvas.getActiveObject();
        if(obj){
            if(/curvedText/.test(obj.type)) {
                default_text = obj.getText();
                props = obj.toObject();
                delete props['type'];
                var textSample = new fabric.Text(default_text, props);
            }else if(/text/.test(obj.type)) {
                default_text = obj.getText();
                props = obj.toObject();
                delete props['type'];
                props['textAlign'] = 'center';
                props['radius'] = 50;
          ...