Text on a path, in Fabric.

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.js"></script>
<canvas ref="canvas" id="canvas" class="canvas"></canvas>

CSS

.canvas {
  border: 1px solid blue;
}

JavaScript

let cnv = document.getElementById('canvas')
let canvas = new fabric.Canvas(cnv, {
  width: 600,
  height: 300
})

let textPath = new fabric.Path("M0,50c6.27-6.5,12.54-13,25.08-13,25.07,0,25.07,26,50.15,26,12.33,0,18.6-6.29,24.77-12.68", {
 	left: 50,
 	top: 50,
  fill: 'transparent',
  stroke: 'blue',
  strokeWidth: 1,
  scaleX: 1,
  scaleY: 1,
})
canvas.add(textPath)
let text = new fabric.Text('Sample', {
	left: textPath.left,
  top: textPath.top,
  fill: '#ff00ff',
  fontFamily: 'Arial',
  fontSize: 20,
  
  textAlign: 'center',
  width: 300,
  path: textPath,
})
canvas.add(text)