node-canvas -> @napi-rs/canvas

Dockerfile

@@ -3,8 +3,6 @@ FROM node:21-slim as dependency-base
     RUN apt-get update -yqq \
         && apt-get install -yqq \
             python3 build-essential pkg-config \
-            # https://github.com/Automattic/node-canvas/issues/1065#issuecomment-654706161
-            libpixman-1-dev libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev \
         && apt-get clean -yqqq
 
 FROM dependency-base as build
@@ -31,7 +29,6 @@ FROM node:21-slim
             fonts-noto-color-emoji \
             fontconfig \
             fonts-liberation \
-            libpixman-1-dev libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev \
         && apt-get clean -yqqq \
         && fc-cache -f -v
 

package.json

@@ -27,8 +27,8 @@
   "homepage": "https://github.com/NullDev/CSZ-Bot#readme",
   "dependencies": {
     "@discordjs/voice": "^0.16.1",
+    "@napi-rs/canvas": "^0.1.44",
     "@resvg/resvg-js": "^2.6.0",
-    "canvas": "^2.11.2",
     "chrono-node": "^2.7.4",
     "croner": "^8.0.0",
     "discord.js": "^14.14.1",

src/commands/bonk.ts

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
 
-import nodeCanvas from "canvas";
+import { createCanvas, loadImage } from "@napi-rs/canvas";
 import type { Client, GuildMember } from "discord.js";
 
 import type { CommandResult, MessageCommand } from "./command.js";
@@ -10,8 +10,6 @@ import { getConfig } from "../utils/configHandler.js";
 
 const config = getConfig();
 
-const { createCanvas, loadImage } = nodeCanvas;
-
 const createBonkMeme = async (author: GuildMember): Promise<Buffer> => {
     const bonk = await fs.readFile("assets/bonk.png");
     const bonkImage = await loadImage(bonk);
@@ -25,7 +23,7 @@ const createBonkMeme = async (author: GuildMember): Promise<Buffer> => {
     ctx.drawImage(avatarImage, 120, 90);
     ctx.drawImage(bonkImage, 0, 0);
 
-    return canvas.toBuffer();
+    return await canvas.encode("png");
 };
 
 export class BonkCommand implements MessageCommand {

src/commands/special/where.ts

@@ -1,17 +1,14 @@
 import { Message, Client, cleanContent } from "discord.js";
-import nodeCanvas from "canvas";
+import { createCanvas, loadImage, GlobalFonts } from "@napi-rs/canvas";
+import { readFile } from "fs/promises";
 
 import type { SpecialCommand } from "../command.js";
 import { countWords, substringAfter } from "../../utils/stringUtils.js";
 
-const { createCanvas, loadImage, registerFont } = nodeCanvas;
-
 if (process.env.NODE_ENV === "production") {
     // This is a simple detection if we're running inside docker
     // We assume that every developer that wants to use this feature has impact installed
-    registerFont("assets/impact.ttf", {
-        family: "Impact",
-    });
+    GlobalFonts.register(await readFile("assets/impact.ttf"), "Impact");
 }
 
 export class WhereCommand implements SpecialCommand {
@@ -70,6 +67,6 @@ export class WhereCommand implements SpecialCommand {
         ctx.fillStyle = "#fff";
         ctx.fillText(text, textPos.x, textPos.y);
 
-        return canvas.toBuffer();
+        return await canvas.encode("png");
     }
 }

src/commands/stempelkarte.ts

@@ -1,5 +1,5 @@
 import * as fs from "node:fs/promises";
-import nodeCanvas from "canvas";
+import { createCanvas, loadImage } from "@napi-rs/canvas";
 import {
     ImageSize,
     Client,
@@ -15,8 +15,6 @@ import log from "../utils/logger.js";
 import type { ApplicationCommand, CommandResult } from "./command.js";
 import { chunkArray } from "../utils/arrayUtils.js";
 
-const { createCanvas, loadImage } = nodeCanvas;
-
 const stempelLocations = [
     // 1-3
     { x: 214, y: 38 },
@@ -106,7 +104,7 @@ const drawStempelkarteBackside = async (
         firmenstempelCenter.y - subjectAvatar.height / 2,
     );
 
-    return canvas.toBuffer();
+    return await canvas.encode("png");
 };
 
 export class StempelkarteCommand implements ApplicationCommand {