Curved Text

by Steve Eberhardt

HTML

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.js"></script>
<script src="https://unpkg.com/[email protected]/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 0 0 A 20 20 0 0 1 300 0', {
  	strokeWidth: 2,
  	stroke: 'red',
    left: 100,
    top: 150,
    fill: 'transparent'
  });

var text = new fabric.Text('One Ring to rule them all', {
  path: path,
  fontSize: 44,
  left: 100,
  top: 150
});
canvas.add(path);
canvas.add(text);