html5 - fabricJS text with uniform lineheight for each line -


i want text lines have same lineheights first line doesn't have line height

please check fiddle https://jsfiddle.net/fahadnabbasi/zukc6pvc/1/

var canvas = new fabric.canvas('c'); 

var text_temp = new fabric.itext("one 2 three\nfour 5 six\nseven 8 nine", { left: 20, top: 20, fontsize: 48,

        fill: "#000000",         lineheight : 2     });      canvas.add(text_temp) 

i want attached image

enter image description here

var canvas = new fabric.canvas('c');    // override full line height  fabric.text.prototype.calctextheight = function() {        var lineheight, height = 0;        (var = 0, len = this._textlines.length; < len; i++) {          lineheight = this.getheightofline(i);          height += lineheight;        }        return height;      };        fabric.text.prototype._gettopoffset = function() {    return -this.height / 2 + this.getheightofline(0) / this.lineheight;  };    var text_temp = new fabric.itext("one 2 three\nfour 5 six\nseven 8 nine", {              left: 20,              top: 20,              fontsize: 48,              textbackgroundcolor: 'red',              backgroundcolor: 'yellow',              fill: "#000000",              lineheight : 2          });                    canvas.add(text_temp)                    
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>  <canvas id="c" width="600" height="600"></canvas>

i'm not sure complete solution, nor want go deeper in modifying core behaviour of library. snippet can helpyou can fail in more advanced use cases.


Comments