Automattic / Automattic/node-canvas

Problem while sending a canvas image of text

Open
#2,009 3 comments 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

## Issue or Feature
- [x] If this is an issue with installation, I have read the [troubleshooting guide](https://github.com/Automattic/node-canvas/issues/1511).

## Code

```js
const Canvas = require("canvas");
let desc;
let foot;
let body = await client.axios.get("https://api.quotable.io/random");
body = body?.data;
if(body[0]?.content) {
desc = body[0]?.content;
foot = body[0]?.author;
} else {
body = await client.axios.get("https://zenquotes.io/api/random");
body = body?.data;
desc = body[0]?.q;
foot = body[0]?.a;
}
if(!desc || !foot) return client.functions.senderr(message, `${client.ename.error} | There was an error while fetching quotes from our database. Please Try Again.`);
let msg = desc;
let randomCol = '#'+((1<<24)*(Math.random()+1)|0xc0c0c0).toString(16).substr(1);
msg = await client.functions.splitstr(msg, "35", " ");
let sent = msg.join(" ");
if(msg.length > 10) return
let width = msg.length * 100;
msg = msg.join("\n");
const canvas = Canvas.createCanvas(1500, width);
const ctx = canvas.getContext('2d');
const background = await Canvas.loadImage('https://media.discordapp.net/attachments/950035664223735848/950229476204220426/fast.png');
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
ctx.strokeStyle = randomCol;
ctx.strokeRect(0, 0, canvas.width, canvas.height);
ctx.font = '70px Impact';
ctx.textAlign = "start";
ctx.fillStyle = randomCol;
ctx.fillText(msg, 80, 80);
ctx.clip();
let att = new client.discord.MessageAttachment(canvas.toBuffer(), "test.png");
message.channel.send({files: [att]});
```
## Issue
I have made the above code and it was working till day before yesterday but from yesterday it's returning the the below image which is a problem.
![screenshot](https://media.discordapp.net/attachments/835566956114477087/955480435067093002/test.png)

I tried returning only the text and the text was correct but after it passes through my canvas code it returns those wierd symbols image which is surprising because it was working perfectly before but recently it's behaving like that even if i didn't changed anything in the code.

Any help regarding this would be appreciated. I tried to find the support server of canvas but was unable.

## Your Environment
* Version of node-canvas 2.9.1
* Environment node 16.4.2 on linux

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.