CODEWITHSUNDEEP
node.jscanvas
Noamway
Noamway

Reputation: 195

How to install Google Font on nodejs-canvas?

I'm trying to get Google Fonts dynamically with nodejs-canvas and I'm not sure what is the best way to do that. I understand it needs to be with: "registerFont" method. This is the code I have now:

const { registerFont, createCanvas, loadImage } = require('canvas')
//registerFont('comicsans.ttf', { family: 'Comic Sans' })
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

let name = req.query.name;

// Write "Awesome!"
ctx.font = '30px Impact'
ctx.rotate(0.1)
ctx.fillText(name, 50, 100)

// Draw line under text
var text = ctx.measureText(name)
ctx.strokeStyle = 'rgba(0,0,0,0.5)'
ctx.beginPath()
ctx.lineTo(50, 102)
ctx.lineTo(50 + text.width, 102)
ctx.stroke()

//console.log(canvas.toDataURL());

res.write('<img style="border:1px solid #000;" src="' + canvas.toDataURL() + '" />');
res.end();

Upvotes: 6

Views: 3192

Answers (1)

Loktar
Loktar

Reputation: 35309

Using PT Mono as an example this is how you do it.

  1. First go to the font directly in this case PT Mono.

  2. Next click the "download family" link in the top right. That will give you a zip file which contains the TTF font.

  3. Now copy the ttf file into your node application directory and use registerFont in your file like this.

registerFont('PtMono-Regular.ttf', { family: 'PT Mono' });

As per the documentation make sure you register your fonts before creating the canvas.

Then to use your font on your canvas you'd just use the following to set the font for the context.

ctx.font = "16px 'PT Mono'";

Full Example using our google font just modifying the original example in the node-canvs repo.

const { registerFont, createCanvas } = require('canvas');
registerFont('PtMono-Regular.ttf', { family: 'PT Mono' });

const canvas = createCanvas(500, 500);
const ctx = canvas.getContext('2d');

ctx.font = `16px "PT Mono"`;
ctx.fillText('This is the font.', 250, 10);

Upvotes: 5

Related Questions