JSFiddle - React, Tailwind, and code Playground

by Gisele Lima

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
<canvas id="c" width="400" height="400"></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>
Angle : 0 <input type="range"  min="0" max="360" value="0" id="angle" /> 360 <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: 20,
        left: 150,
        top: 200,
        textAlign: 'center',
        fill: '#0000FF',
        radius: 50,
        fontSize: 20,
        spacing: 20,
        angle: 0
//        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, #angle').change(function(){
		var obj = canvas.getActiveObject();
		if(obj){
			obj.set($(this).attr('id'),$(this).val()); 
		}
		canvas.renderAll();
	});
	$('#radius, #spacing, #angle').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';
              ...