Skip to content

Renderer agnostic utility for drawing text along a path

License

Notifications You must be signed in to change notification settings

ahocevar/textpath

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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')

About

Renderer agnostic utility for drawing text along a path

Resources

License

Stars

Watchers

Forks

Packages

No packages published