JSFiddle - React, Tailwind, and code Playground

by swesh

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/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>
  Direction : <label><input type="radio" name="reverse" class="reverse" value="true" /> Downside-up</label> <label><input type="radio" name="reverse" class="reverse" value="false" checked="checked" /> Upside-Down</label><br />
  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" /> Centr�</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>

CSS

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

JavaScript

/***** Required : http://fabricjs.com *****/
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' ) {
          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 and left
    */
    CurvedText.prototype.center = function() {
      this.opts.top...