chore(rendering): support cross-platform skia-canvas (#835)

Author: ugcodrr

apps/api/src/skin/skin.service.ts

@@ -6,15 +6,15 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
-import { Canvas, type Image } from "skia-canvas";
 import { HttpService } from "@nestjs/axios";
+import { type Image } from "skia-canvas";
 import { InjectModel } from "@m8a/nestjs-typegoose";
 import { Injectable, InternalServerErrorException } from "@nestjs/common";
 import { PlayerNotFoundException } from "@statsify/api-client";
 import { Skin } from "@statsify/schemas";
 import { catchError, lastValueFrom, map } from "rxjs";
+import { createCanvas, loadImage } from "@statsify/rendering";
 import { getMinecraftTexturePath } from "@statsify/assets";
-import { loadImage } from "@statsify/rendering";
 import { renderSkin } from "@statsify/skin-renderer";
 import type { ReturnModelType } from "@typegoose/typegoose";
 
@@ -30,7 +30,7 @@ export class SkinService {
       .then((skin) => this.resolveSkin(skin?.skinUrl, skin?.slim ?? false))
       .catch(() => this.resolveSkin(undefined, false));
 
-    const canvas = new Canvas(size, size);
+    const canvas = createCanvas(size, size);
     const ctx = canvas.getContext("2d");
     ctx.imageSmoothingEnabled = false;
 

apps/discord-bot/src/commands/config/badge.command.tsx

@@ -17,12 +17,12 @@ import {
   LocalizeFunction,
   SubCommand,
 } from "@statsify/discord";
-import { Canvas, Image } from "skia-canvas";
+import { type Canvas, Image } from "skia-canvas";
 import { DemoProfile } from "./demo.profile.js";
 import { User, UserTier } from "@statsify/schemas";
+import { createCanvas, loadImage, render } from "@statsify/rendering";
 import { getBackground, getLogo } from "@statsify/assets";
 import { getTheme } from "#themes";
-import { loadImage, render } from "@statsify/rendering";
 
 @Command({ description: (t) => t("commands.badge") })
 export class BadgeCommand {
@@ -88,7 +88,7 @@ export class BadgeCommand {
             (t) => t("errors.unknown.description")
           );
 
-        const canvas = new Canvas(32, 32);
+        const canvas = createCanvas(32, 32);
         const ctx = canvas.getContext("2d");
         ctx.imageSmoothingEnabled = false;
 

apps/discord-bot/src/commands/minecraft/cape.command.ts

@@ -14,7 +14,8 @@ import {
   MojangPlayerArgument,
   PaginateService,
 } from "@statsify/discord";
-import { Canvas, Image, loadImage } from "skia-canvas";
+import { Image, loadImage } from "skia-canvas";
+import { createCanvas } from "@statsify/rendering";
 import type { Skin } from "@statsify/schemas";
 
 @Command({ description: (t) => t("commands.cape"), args: [MojangPlayerArgument] })
@@ -71,7 +72,7 @@ export class CapeCommand {
   }
 
   private renderCape(cape: Image) {
-    const canvas = new Canvas(636, 1024);
+    const canvas = createCanvas(636, 1024);
     const ctx = canvas.getContext("2d");
     ctx.imageSmoothingEnabled = false;
 

apps/discord-bot/src/commands/minecraft/skin.command.tsx

@@ -14,8 +14,8 @@ import {
   IMessage,
   MojangPlayerArgument,
 } from "@statsify/discord";
-import { Canvas } from "skia-canvas";
 import { STATUS_COLORS } from "@statsify/logger";
+import { createCanvas } from "@statsify/rendering";
 
 @Command({ description: (t) => t("commands.skin"), args: [MojangPlayerArgument] })
 export class SkinCommand {
@@ -30,7 +30,7 @@ export class SkinCommand {
     );
 
     const skin = await this.apiService.getPlayerSkin(player.uuid, user);
-    const canvas = new Canvas(skin.width, skin.height);
+    const canvas = createCanvas(skin.width, skin.height);
     canvas.getContext("2d").drawImage(skin, 0, 0);
 
     const embed = new EmbedBuilder()

apps/scripts/src/rank-emojis.js

@@ -6,8 +6,7 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
-import { Canvas } from "skia-canvas";
-import { FontRenderer } from "@statsify/rendering";
+import { FontRenderer, createCanvas } from "@statsify/rendering";
 import { Logger } from "@statsify/logger";
 import { RestClient } from "tiny-discord";
 import { config, minecraftColors } from "@statsify/util";
@@ -75,15 +74,15 @@ const drawRank = async (formatted) => {
   const nodes = renderer.lex(formatted);
   const { width, height } = renderer.measureText(nodes);
 
-  const textCanvas = new Canvas(width, height);
+  const textCanvas = createCanvas(width, height);
   const textCtx = textCanvas.getContext("2d");
   renderer.fillText(textCtx, nodes, 0, 0);
 
   const imageCount = Math.ceil(width / SIZE);
   const images = [];
 
   for (let x = 0; x < imageCount; x++) {
-    const canvas = new Canvas(SIZE, SIZE);
+    const canvas = createCanvas(SIZE, SIZE);
     const ctx = canvas.getContext("2d");
     ctx.drawImage(textCanvas, SIZE * x, 0, SIZE, SIZE, 0, 0, SIZE, SIZE);
     images.push(await canvas.toDataURL("png"));

package.json

@@ -26,6 +26,11 @@
     "verify-server": "pnpm --filter verify-server"
   },
   "packageManager": "pnpm@10.15.0",
+  "pnpm": {
+    "overrides": {
+      "skia-canvas": "3.0.8"
+    }
+  },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",

packages/rendering/src/canvas.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { Canvas } from "skia-canvas";
+
+type CanvasOptions = ConstructorParameters<typeof Canvas>[2] & { gpu?: boolean };
+
+export function createCanvas(
+  width?: number,
+  height?: number,
+  options: CanvasOptions = {}
+): Canvas {
+  return new Canvas(width, height, { gpu: false, ...options });
+}

packages/rendering/src/font/font-renderer.ts

@@ -9,11 +9,12 @@
 import _positions from "../../positions.json" with { type: "json" };
 import _sizes from "../../sizes.json" with { type: "json" };
 import {
-  Canvas,
+  type Canvas,
   type CanvasRenderingContext2D,
   type ImageData,
 } from "skia-canvas";
 import { type TextNode, type Token, tokens } from "./tokens.js";
+import { createCanvas } from "../canvas.js";
 import { join } from "node:path";
 import { loadImage } from "#hooks";
 import { readdir } from "node:fs/promises";
@@ -34,9 +35,13 @@ interface Sizes {
 
 export class FontRenderer {
   private images: Map<string, CanvasRenderingContext2D>;
+  private canvases: WeakMap<CanvasRenderingContext2D, Canvas>;
+  private scales: WeakMap<CanvasRenderingContext2D, number>;
 
   public constructor(private gradient: boolean) {
     this.images = new Map();
+    this.canvases = new WeakMap();
+    this.scales = new WeakMap();
   }
 
   public async loadImages(fontPath: string) {
@@ -47,13 +52,16 @@ export class FontRenderer {
     for (const file of pictures) {
       const image = await loadImage(join(fontPath, file));
 
-      const canvas = new Canvas(image.width, image.height);
+      const canvas = createCanvas(image.width, image.height);
       const ctx = canvas.getContext("2d");
 
       ctx.imageSmoothingEnabled = false;
 
       ctx.drawImage(image, 0, 0);
 
+      this.canvases.set(ctx, canvas);
+      this.scales.set(ctx, image.width / 256);
+
       this.images.set(
         file.replace("unicode_page_", "").replace(".png", ""),
         ctx
@@ -62,6 +70,8 @@ export class FontRenderer {
   }
 
   public measureText(nodes: TextNode[]): { width: number; height: number } {
+    if (!nodes.length) return { width: 0, height: 0 };
+
     let width = 0;
     let largestSize = nodes[0].size;
 
@@ -189,7 +199,18 @@ export class FontRenderer {
   }
 
   private getTextureScale(image: CanvasRenderingContext2D) {
-    return image.canvas.width / 256;
+    return this.scales.get(image) ?? image.canvas.width / 256;
+  }
+
+  private getImageData(
+    image: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ) {
+    const ctx = this.canvases.get(image)?.getContext("2d") ?? image;
+    return ctx.getImageData(x, y, width, height);
   }
 
   private getCharacterIndexLocation(unicode: string, isAscii: boolean) {
@@ -306,7 +327,7 @@ export class FontRenderer {
       size,
     } = metadata;
 
-    const imageData = image.getImageData(charX, charY, width, height);
+    const imageData = this.getImageData(image, charX, charY, width, height);
 
     ctx.filter = this.gradient ? "brightness(15%)" : "brightness(25%)";
 

packages/rendering/src/index.ts

@@ -8,6 +8,7 @@
 
 /* eslint-disable @typescript-eslint/no-namespace */
 export * from "./colors/index.js";
+export * from "./canvas.js";
 export * from "./font/index.js";
 export * from "./hooks/index.js";
 export * from "./jsx/index.js";

packages/rendering/src/jsx/render.ts

@@ -7,10 +7,11 @@
  */
 
 import * as Sentry from "@sentry/node";
-import { Canvas, type CanvasRenderingContext2D } from "skia-canvas";
+import { type Canvas, type CanvasRenderingContext2D } from "skia-canvas";
 import { Container } from "typedi";
 import { FontRenderer } from "#font";
 import { IntrinsicRenders, intrinsicRenders } from "./instrinsics.js";
+import { createCanvas } from "../canvas.js";
 import { createInstructions } from "./create-instructions.js";
 import { getPositionalDelta, getTotalSize } from "./util.js";
 import { noop } from "@statsify/util";
@@ -137,7 +138,7 @@ export function render(node: ElementNode, theme?: Theme): Canvas {
     description: "Render JSX",
   });
 
-  const canvas = new Canvas(width, height);
+  const canvas = createCanvas(width, height);
   const ctx = canvas.getContext("2d");
   ctx.imageSmoothingEnabled = false;