Curved Text

by Steve Eberhardt

HTML

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
</style>
<canvas id="c" width="600" height="400"></canvas>

CSS

body {
  font-family: 'Handlee', cursive;
}

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,
  fontFamily: 'Handlee',
});
//canvas.add(path);
canvas.add(text);