Fabricjs Roof-Valley Text

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<canvas id="c" width="500" height="300"></canvas>
    <span>Curve:</span>
<input id="iCurve" type="range" min=0 max=200 value=110>
<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/>
<input id="iOffset1" type="range" min=-100 max=100>
<img id="preview" style="border:1px solid black" />
<br/><textarea rows="10" width="100%" id="debug"></textarea>

JavaScript

fabric.DistortedText = fabric.util.createClass(fabric.Textbox, {
  type        : 'distortedText',
  curve:100,
  offset:0,
  off1:0,
  angleText:false,
  _debug:function(canvas){
  	var self = this;
  	var previewImg = document.getElementById("preview");
    var debug = document.getElementById("debug");
    var dim = self._getCacheCanvasDimensions();
    previewImg.onload = function(){
    	debug.innerHTML = previewImg.width +" x "+previewImg.height+"\n"+
      JSON.stringify(dim)+"\n"+JSON.stringify(self.getBoundingRect());
    }
    previewImg.src = canvas.toDataURL();
    
	},
  calcHeight:function(){
  		var height = 0;
  		for(var i=0;i<this.textLines.length;i++){
      	height +=this.getHeightOfLine(i) * this.scaleY;
      }
      return height;
  },
  calcWidth:function(){
  		var width = 0;
  		for(var i=0;i<this.textLines.length;i++){
      	width = Math.max(width,this.getLineWidth(i) / this.scaleX);
      }
      return width;
  },
    drawCacheOnCanvas: function(ctx) {
      var self = this;
      ctx.scale(1 / this.zoomX, 1 / this.zoomY);
      //ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY);
      var wh = this._getCacheCanvasDimensions();
      
  
      var textHeight = self.calcHeight() + 10;
      var textWidth = self.calcWidth();
      
      var i = this._cacheCanvas.width;
      var paddingTop = (this._cacheCanvas.height - textHeight)/2;
      var paddingLeft = (this._cacheCanvas.width - textWidth)/2;
      var angleSteps = 180 / this._cacheCanvas.width;
      var bottom = textHeight,
          offsetY = this.offset * textHeight,
          h = textHeight; //this._cacheCanvas.height;
      if (this.curve > 100){
      	
      }
      
      ctx.translate(-this.cacheTranslationX,-this.cacheTranslationY + (offsetY - textHeight/2) + this.off1);
      /* ctx.fillStyle = "#ff0000" */;
      
      /* ctx.fillRect(0+paddingLeft,0+paddingTop,Math.round(textWidth),textHeight) */;
      
      var dltY = 1;
      var...