Skip to content

Instantly share code, notes, and snippets.

@adamhooper
Last active August 6, 2018 14:12
Show Gist options
  • Save adamhooper/3cb18f90f47150c092a8aa7451b1a79b to your computer and use it in GitHub Desktop.
Save adamhooper/3cb18f90f47150c092a8aa7451b1a79b to your computer and use it in GitHub Desktop.
Using font files directly within node-canvas
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<dir prefix="default">.</dir>
</fontconfig>
'use strict'
// process.env.FC_DEBUG = 0xffff
process.env.PANGOCAIRO_BACKEND = 'fontconfig'
process.env.FONTCONFIG_PATH = __dirname
const canvas = new require('canvas')(640, 480)
const ctx = canvas.getContext('2d')
// '700' and 'bold' are bold; '400' is normal, '900' is extra-bold.
// See node-canvas's Canvas::GetWeightFromCSSString()
// https://github.com/Automattic/node-canvas/blob/62dc1b59c551d1606572b324e6bfc0e099a72d0e/src/Canvas.cc#L731-L760
const Weight = '900'
// 'italic' and 'oblique' are the two other options
// See node-canvas's Canvas::GetStyleFromCSSString()
// https://github.com/Automattic/node-canvas/blob/62dc1b59c551d1606572b324e6bfc0e099a72d0e/src/Canvas.cc#L712-L725
const Style = 'normal'
// Use `fc-match` command-line tool to test this finds your font
// FONTCONFIG_PATH=./fonts fc-match "Proxima Nova Condensed"
const FontFamily = 'Proxima Nova Condensed'
const FontSize = 30 // px font size, even if you specify "pt"
ctx.fillStyle = 'black'
ctx._setFont(Weight, Style, FontSize, 'px', FontFamily)
ctx.fillText("Hello, World!", 50, 50)
require('fs').writeFileSync('hello-world.png', canvas.toBuffer())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment