Try installing the Liberation font family on the machine / container your code runs on.
To reproduce your problem I used a Docker container running Ubuntu 22.04.
$ docker run -it -v $PWD:/app --name ubuntu ubuntu:22.04 /bin/bash
On the started bash terminal session of the Docker container ran following commands to install the Liberation font family.
$ apt update
$ apt install fontconfig
# Check if LiberationSans font is available
$ fc-list LiberationSans
# Above command listed nothing. So font is not installed on the system.
# It is the problem.
# Then downloaded and installed the Liberation font family
$ apt install wget
$ wget http://archive.ubuntu.com/ubuntu/pool/main/f/fonts-liberation/fonts-liberation_2.1.5-3_all.deb
$ dpkg -i fonts-liberation_2.1.5-3_all.deb
$ rm fonts-liberation_2.1.5-3_all.deb
$ fc-cache -f -v
# Above command scans the font directories and
# creates font cache including newly installed Liberation fonts
# Now list Liberation fonts
$ fc-list LiberationSans
# Listed following...
# /usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf: Liberation Sans:style=Regular
# /usr/share/fonts/truetype/liberation/LiberationSans-Italic.ttf: Liberation Sans:style=Italic
# /usr/share/fonts/truetype/liberation/LiberationSans-BoldItalic.ttf: Liberation Sans:style=Bold Italic
# /usr/share/fonts/truetype/liberation/LiberationSans-Bold.ttf: Liberation Sans:style=Bold
Now, let's try rendering a PDF page on a canvas.
Installing Node JS (v20), first.
$ wget https://deb.nodesource.com/setup_20.x -O nodesource_setup.sh
$ bash nodesource_setup.sh
$ apt install -y nodejs
$ rm nodesource_setup.sh
# I use pnpm as the package manager.
$ npm install -g pnpm
To successfully build canvas NPM package, we need following dependencies on our system.
$ apt install -y build-essential libcairo2-dev libpango1.0-dev
Source code...
package.json
{
"name": "app",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"canvas": "^2.11.2",
"pdfjs-dist": "^3.11.174"
}
}
index.js
const pdfjs = require("pdfjs-dist/build/pdf")
const {readFileSync} = require('fs')
const {writeFile} = require('fs/promises')
const {createCanvas} = require('canvas')
async function main() {
const pdfFilePath = ...
const pdfjsWorker = require('pdfjs-dist/build/pdf.worker.entry')
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
pdfjs.disableFontFace = true;
const pdf = await pdfjs.getDocument(new Uint8Array(readFileSync(pdfFilePath))).promise
// Get first page
const pdfPage = await pdf.getPage(1)
// Render page to a canvas
const viewport = pdfPage.getViewport({ scale: 1 });
const canvas = createCanvas(viewport.width, viewport.height);
const canvasContext = canvas.getContext('2d');
await pdfPage.render({canvasContext, viewport}).promise
// Get PNG image buffer
canvas.toBuffer()
pdfPage.cleanup()
await pdf.cleanup()
await pdf.destroy()
}
main()
Run...
$ node ./index.js
This should work.