I can't see any text

[dpaulos6]

I've tried using the default font and I tried using GlobalFonts with a custom font and it doesn't show any text.
Any ideas?

[adrianlivr]

Same here

[Brooooooklyn]

Could you please provide minimal reproducible code snippets so I can debug it?

[gegtor]

@Brooooooklyn I'm having the same issue

The code runs okay on my Mac but in a docker container the text is empty
I've verified that fonts load in the docker container by running console.dir(GlobalFonts.families);

Here's a code snippet

GlobalFonts.registerFromPath('../fonts/helvetica.ttf', 'helvetica');
GlobalFonts.registerFromPath('../fonts/helvetica-bold.ttf', 'helvetica-bold');

context.font = 'bold 15px/1 helvetica-bold';
context.fillText(user.steamId, -575, 619);

[Brooooooklyn]

@gegtor could you also upload the helvetica-bold.ttf ?

[gegtor]

@Brooooooklyn Yes here it is
helvetica-bold.ttf.zip

[olivvein]

I found a fix
the font must be installed in docker (alpine)
in Dockerfile:

COPY ./fonts/helvetica-bold.ttf ./
RUN mkdir -p /usr/share/fonts/truetype/
RUN install -m644 helvetica-bold.ttf /usr/share/fonts/truetype/
RUN rm ./helvetica-bold.ttf

[gegtor]

I found a fix the font must be installed in docker (alpine) in Dockerfile:

COPY ./fonts/helvetica-bold.ttf ./ RUN mkdir -p /usr/share/fonts/truetype/ RUN install -m644 helvetica-bold.ttf /usr/share/fonts/truetype/ RUN rm ./helvetica-bold.ttf

It works! Thank you! 🥰
@Brooooooklyn Could you put it in the docs or possibly make a workaround and fix it?

[Brooooooklyn]

Could you try 0.1.38 without the workaround?

[ShivamJoker]

@Brooooooklyn I have tested writing text on my image it seems to work great.
Here is the full code:

import fs from "node:fs";
import { createCanvas, loadImage, GlobalFonts } from "@napi-rs/canvas";

// Load your custom font
GlobalFonts.registerFromPath("./ReenieBeanie-Regular.ttf", "myfont");

// Define the image and text properties
const inputImage = "./welcome-template.jpg";
const outputImage = "output-image.jpg";

const text = `Shivam,
I am so happy
to have you!`;

const fontSize = 90;
const xCoordinate = 715;
const yCoordinate = 510;
const lineHeight = fontSize * 0.9;

// Load the input image using Canvas
loadImage(inputImage).then((image) => {
  const canvas = createCanvas(image.width, image.height);
  const ctx = canvas.getContext("2d");

  // Draw the image onto the canvas
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  // Set the text properties
  ctx.font = `normal ${fontSize}px "myfont"`;
  ctx.fillStyle = "black";

  // Draw the text on the image with new lines
  const lines = text.split("\n");
  lines.forEach((line, index) => {
    ctx.fillText(line, xCoordinate, yCoordinate + index * lineHeight);
  });

  // Save the canvas as an image
  const buffer = canvas.toBuffer("image/jpeg", 50);
  fs.writeFileSync(outputImage, buffer);
});

[iKK001]

It does not work for me. No text visible in canvas!

Since I am not sure if there is something specific about my Google Cloud Run node:18-alpine installation, I opened a new ticked for GCR usage here....

Please help. I am pretty desperate about this issue!

[cjnoname]

@Brooooooklyn We are facing the same issue. The text is shown on local but no on Lambda. Could you please help?

[cjnoname]

The problem is fixed, but it's very strange.

When I register the file from a Base64 string, it only has a 5% chance of working on Lambda.
GlobalFonts.register(Buffer.from(CALIBRI_FONT_BASE64, "base64"), "Calibri");

However, when I register the font from a file, it works fine on Lambda.

I guess there is a bug in the GlobalFonts.register method, where it is not waiting for the loading process to complete.
@Brooooooklyn