JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.js"></script>
 <canvas id="c" width="400" height="200"></canvas>
  <br>
  <input type="text" class="text" value="Curved text"><br>
  Radius : <input type="range"  min="0" max="100" value="50" class="radius" /><br>
  spacing : <input type="range"  min="5" max="40" value="20" class="spacing" /><br>
  text Inverse: <label><input type="radio" name="reverse" class="reverse" value="true" /> Outside</label> <label><input type="radio" name="reverse" class="reverse" value="false" checked="checked" /> Inside</label><br />
    Text rotate:  <input type="radio" name="mirror" class="mirror" value="-11" /> 
  Alignement : <label><input type="radio" name="align" class="align" value="left" /> Left</label> <label><input type="radio" name="align" class="align" value="center" checked="checked" /> Center</label>  <label><input type="radio" name="align" class="align" value="right" /> Right</label><br >
  Font Size : <input type="range"  min="3" max="100" value="20" class="fontSize" /><br>
      Opacity : <input type="range"  min="3" max="100" value="20" class="opacity" id='opacity' /><br>
      Font Style 
      <input type="checkbox" id='italic' name='italic' value='italic'>Italic<br>
      Font family
      <select id="font_fam" class="text_tool dropdown" size="4">
				<option value="serif">Serif</option>
				<option value="Arial">Arial</option>
				<option value="Comic Sans MS">Comic Sans MS</option>
				<option value="Courier New">Courier New</option>
				<option value="Georgia">Georgia</option>
				<option value="Helvetica">Helvetica</option>
				<option value="Lucida Console">Lucida Console</option>
				<option value="Lucida Grande">Lucida Grande</option>
				<option value="Microsoft Sans Serif">Microsoft Sans Serif</option>
				<option value="script">script</option>
				<option value="Tahoma">Tahoma</option>
				<option value="Times New Roman">Times New Roman</option>
				<option value="Trebuchet...

CSS

canvas {  border:1px solid #000;     }
.controles {  margin:50px 0;   }

JavaScript

/***** Required : http://fabricjs.com *****/
$(document).ready(function(){
var CurvedText = (function() {

    /**
    * Constructor
    * @method curvedText
    * @param canvas
    * @param {object} options
    */
    function CurvedText( canvas, options ){

      // Options
      this.opts = options || {};
      for ( var prop in CurvedText.defaults ) {
         if (prop in this.opts) { continue; }
         this.opts[prop] = CurvedText.defaults[prop];
      }

      this.canvas = canvas;
      this.group = new fabric.Group([], {selectable: this.opts.selectable});
      this.canvas.add( this.group ) ;
      this._forceGroupUpdate();
      this.setText( this.opts.text );
    }


    /**
    * @method set
    * @param {string} param
    * @param value
    * @return false if the param name is unknown
    */
    CurvedText.prototype.set = function( param, value ) {
      if ( this.opts[param] !== undefined ) {
        this.opts[param] = value;
        if ( param === 'fontSize' || param === 'fontWeight' || param === 'fontFamily'  || param === 'fontStyle' ) {
          this._setFontStyles();
        }
        if ( param === 'selectable' ) {
          this.group.selectable = value;
        }
        if ( param === 'angle' ) {
          this._forceGroupUpdate();
        }

        this._render();
        return true;
      } else {
        return false;
      }
    };
    
    /**
    * @method get
    * @param {string} param
    * @return value of param, or false if unknown
    */
    CurvedText.prototype.get = function( param ) {
      this._render();
      if ( this.opts[param] !== undefined ) {
        return this.opts[param];
      } else {
        return false;
      }
    };
    
    /**
    * @method getParams
    * @return {object} value of every options
    */
    CurvedText.prototype.getParams = function() {
      this._render();
      return this.opts;
    };
    
    /**
    * Center the group in canvas
    * @method center
    * @return {object} with top...