Curved Text startOffset

by Steve Eberhardt

HTML

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.js"></script>


<canvas id="c" width="600" height="400"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

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

var path = new fabric.Path("M 50 0 a 50 100 0 1 1 1 0 Z", {
  	strokeWidth: 2,
  	stroke: 'red',
    left: 100,
    top: 100,
    fill: 'transparent'
  });

var path2 = new fabric.Path('M 0 0 Q 180 0 180 -101.25 Q 180 -180 90 -180 Q 0 -180 0 -112.5 Q 0 -45 78.75 -45 Q 135 -45 146.25 -90', {
  	strokeWidth: 2,
  	stroke: 'red',
    left: 300,
    top: 100,
    fill: 'transparent'
  });
  
var text = new fabric.Text('One Ring to rule them all, one ring to find them', {
  path: path,
  fontSize: 24,
  left: 100,
  top: 100,
  startOffset: 0,
  textAlign: 'center',
  charSpacing: -20,
  padding: 20,
  startOffset: 50
});

var text2 = new fabric.Text('One Ring to rule them', {
  path: path2,
  fontSize: 30,
  left: 300,
  top: 100,
  startOffset: 0,
  charSpacing: 0,
  padding: 20,
  startOffset: 50
});

canvas.add(path);
canvas.add(text);
canvas.add(path2);
canvas.add(text2);


fabric.Text.prototype._measureLine = function(lineIndex) {
      var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme,
          graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length),
          positionInPath = 0, startingPoint, totalPathLength, path = this.path;

      this.__charBounds[lineIndex] = lineBounds;
      if (path) {
        startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo);
        totalPathLength = path.segmentsInfo[path.segmentsInfo.length - 1].length;
        startingPoint.x += path.pathOffset.x;
        startingPoint.y += path.pathOffset.y;
        if(this.textAlign == "center" || this.textAlign == "right") {
        	for (i = 0; i < line.length; i++) {
          	grapheme = line[i];
          	graphemeInfo = this._getGraphemeBox(grapheme, lineIndex, i, prevGrapheme);
            lineBounds[i] = graphemeInfo;
            width += graphemeInfo.kernedWidth;
            prevGrapheme = grapheme;
          }
          switch(this.textAlign) {
          	case "center":
           ...