canvas-text-opentypejs-shim

Text rendering shim for <canvas> backed by opentype.js. It allows you to get consistent results regardless of the OS, browser and the environment (Node.js). Works great with kangax/fabric.js.

Installation

Get it directly from NPM:

npm i --save canvas-text-opentypejs-shim

or through unpkg:

<script src="https://unpkg.com/canvas-text-opentypejs-shim@0.1.0></script>
(in this case shim will be available as window['canvas-text-opentypejs-shim']).

Usage

const useOpenTypeJsForText = require('canvas-text-opentypejs-shim')
 
const canvas ... 
const ctx = canvas.getContext('2d')
 
useOpenTypeJsForText(ctx, {resolveFont: (o) => opentypeFontInstance})
 
ctx.font = '26px Roboto'
ctx.fillText(text, 50, 50)

Live Demo @ JS Bin.

Live Demo (using kangax/fabric.js) @ JS Bin.

Live Demo (using automattic/node-canvas) @ RunKit. Node.js

Demo (using kangax/fabric.js). Node.js

License

MIT