Automattic / Automattic/node-canvas

Text corrupted on Google Cloud Functions

Open
#2,544 1 comment 0 reactions 0 assignees View on GitHub
Text & Fonts
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

When creating an image with node-canvas inside Google Cloud Functions, the resulting image does not render simple text correctly. Instead of the expected text, the output appears as corrupted, displaying rectangles.

Image

Deployed a Google Cloud Function with Node 22 (Ubuntu 22).

Installed canvas version ^3.2.0.

Used the following example code:

```
const functions = require('@google-cloud/functions-framework');
const { createCanvas, loadImage } = require("canvas");

functions.http('hello', (req, res) => {
try {
const width = 200;
const height = 200;
const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");

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

// Output PNG
const buffer = canvas.toBuffer("image/png");
res.set("Content-Type", "image/png");
res.send(buffer);
} catch (err) {
console.error(err);
res.status(500).send("Render error");
}
});
```

**Expected behavior**
The PNG should display the text "Awesome!" clearly.

**Actual behavior**
The text does not render correctly — it appears corrupted, or replaced by strange shapes.

This **works correctly in local** Node 22 environment.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.