textpath

Renderer agnostic utility for drawing text along a path.

Getting started

The ES2015 way

To add the dependency to your project, run

npm install --save textpath

To use in your code, type

import textPath from 'textpath';

The vanilla JavaScript way

Include the following script tag in your HTML:

<script src="http://unpkg.com/textpath/dist/textpath.js"></script>

API

textPath

To render text to a CanvasRenderingContext2D, use something like the following code:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
var path = [[20, 33], [40, 31], [60, 30], [80, 31], [100, 33]];
 
function measureText(text) {
  return ctx.measureText(text).width;
}
 
function draw(letter, x, y, angle) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);
  ctx.fillText(letter, 0, 0);
  ctx.restore();
}
 
textPath('My text path :-)', path, measureText, draw);

Parameters

• text string Text to draw along the path.
• path Array<Array<number>> Path represented in coordinate pairs.
• measure Function Function that takes a text as argument and returns the width of the provided text.
• draw Function Function that takes a letter, its x coordinate, y coordinate and angle (in radians) as arguments. It is typically used to draw the provided letter to a canvas.
• textAlign string Text alignment along the path. One of 'left', 'center', 'right'. (optional, default 'center')