Fabricjs Roof-Valley Text With StaticCanvas

/* * FabricJS Distorted Text - FabricJS extension for creating bulged text (rounded and squared) * https://www.coding-dude.com * * Copyright John Negoita <[email protected]> * Released under the Creative Commons Attribution Share-Alike (cc-by-sa) license. * https://creativecommons.org/licenses/by-sa/4.0/ * */

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<canvas id="c" width="500" height="300"></canvas>
    <span>Amount:</span>
<input id="iCurve" type="range" min="0" max=1 value="0" step="any">
<input type="text" id="iCurveText"><br/>
<span>Offset:</span>
<input id="iOffset" type="range" min=0 max=1 step="0.01">
<input type="text" id="iOffsetText"><br/>
<span>Bulged:</span>
<input type="checkbox" id="iBulge">

<span>Straight:</span>
<input type="checkbox" id="iStraight">

JavaScript

/*
 * FabricJS Distorted Text - FabricJS extension for creating bulged text (rounded and squared)
 * https://www.coding-dude.com
 *
 * Copyright John Negoita <[email protected]>
 * Released under the Creative Commons Attribution Share-Alike (cc-by-sa) license.
 * https://creativecommons.org/licenses/by-sa/4.0/
 *
 */
 
fabric.DistortedText = fabric.util.createClass(fabric.Textbox, {
  type        : 'distortedText',
  amount: 0.5,
  offset:0,
  bulged:false,
  straight:false,
    _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) {
    
      var decl = this._getStyleDeclaration(lineIndex, charIndex),
          fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex),
          shouldFill = method === 'fillText' && fullDecl.fill,
          shouldStroke = method === 'strokeText' && fullDecl.stroke && fullDecl.strokeWidth;

      if (!shouldStroke && !shouldFill) {
        return;
      }
      decl && ctx.save();

      this._applyCharStyles(method, ctx, lineIndex, charIndex, fullDecl);

      if (decl && decl.textBackgroundColor) {
        this._removeShadow(ctx);
      }
      if (decl && decl.deltaY) {
        top += decl.deltaY;
      }
			var distortedTextCanvas = this.drawOffCanvas(_char);
      
      //shouldFill && ctx.fillText(_char, left, top);
      //shouldStroke && ctx.strokeText(_char, left, top);
      
      
      var wh = this._calculateCurrentDimensions();
      ctx.scale(1/this.scaleX,1/this.scaleY);
      ctx.translate(-wh.x/2,-wh.y/2);
      ctx.drawImage(distortedTextCanvas,0,0,distortedTextCanvas.width,distortedTextCanvas.height,
      0,0,wh.x,wh.y);
      decl && ctx.restore();
    },
    drawOffCanvas:function(){
    	var wh = this._calculateCurrentDimensions();
      
      var thisObj = this.toJSON();
      delete thisObj["type"];
      thisObj.top=0;
      thisObj.left=0;
      thisObj.angle=0;
      //thisObj.scaleX=1;
      //thisObj.scaleY=1;
    	var text = new...