Two.js: Text along a Path?

https://github.com/jonobr1/two.js/issues/203

by Vijay Gujar

HTML

<script src="https://two.js.org/third-party/two.js"></script>
<script src="//two.js.org/third-party/two.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<div id="root">
  <canvas id="canvas" width="1000" height="1000"></canvas>
  <canvas id="canvas2" width="1000" height="1000"></canvas>
</div>

JavaScript

var two = new Two({
	fullscreen: true
}).appendTo(document.body);

var length = 64;
var width = 250;
var height = 50;

var points = [];
for (var i = 0; i < length; i++) {
	var pct = i / (length - 1);
  var x = pct * width - width / 2;
  var y = (height / 2) * Math.sin(pct * Math.PI * 2 * 3.5);
  points.push(new Two.Anchor(x, y));
}
var wave = two.makeCurve(points, true);
wave.translation.set(two.width / 2, two.height / 2);
wave.noFill();
wave.stroke = 'rgb(255, 100, 100)';
wave.linewidth = 0.5;
wave.cap = 'round';

var text = two.makeText('The quick brown fox jumped over the lazy dog', 0, 0, {
  alignment: 'left'
});

two.update();	// Generate the SVG elements

text._renderer.elem.innerHTML = [
	'<textPath xlink:href="#', wave.id, '">', text.value, '</textPath>'
].join('');

two.bind('update', function(frameCount) {
	var vertices = wave.vertices;
  for (var i = 0; i < vertices.length; i++) {
    var offset = frameCount / 20;
  	var v = vertices[i];
    var pct = i / (vertices.length - 1);
    var y = (height / 2) * Math.sin(offset + pct * Math.PI * 2 * 3.5);
    v.y = y;
  }
});
//two.play();