Text on a path, in Fabric.

by Arjan Haverkamp

HTML

<script src="https://unpkg.com/[email protected]/dist/fabric.js"></script>
<canvas ref="canvas" id="canvas" class="canvas"></canvas>

CSS

.canvas {
  border: 1px solid red;
}

JavaScript

const parameters = {
	width: 800,
  height: 200
}
let reference = document.getElementById('canvas')
let canvas = new fabric.Canvas(reference, {
  selection: false,
  preserveObjectStacking: true
})
canvas.setWidth(parameters.width)
canvas.setHeight(parameters.height)
let pathForText = new fabric.Path(`M 0 0 Q 390 200 780 0`, {
  left: 10,
  top: 50,
  fill: '',
  stroke: 'red',
  strokeWidth: 1
})
canvas.add(pathForText)
let text = new fabric.Text('Here is some text on a path, and I hope you find it useful!', {
  fill: 'red',
  fontFamily: 'Verdana',
  fontSize: 26,
  left: pathForText.left,
  path: pathForText,
  textAlign: 'center', // While this doesn't work with text on a path, `text-anchor="middle" startOffset="50%"` would accomplish the same in SVG.
  top: pathForText.top,
  width: parameters.width
})
canvas.add(text)