Drop-in replacement for Canvas

package.json

@@ -32,10 +32,10 @@
   "engineStrict": true,
   "packageManager": "yarn@4.1.0+sha256.81a00df816059803e6b5148acf03ce313cad36b7f6e5af6efa040a15981a6ffb",
   "dependencies": {
+    "@napi-rs/canvas": "0.1.45",
     "@octokit/rest": "20.0.2",
     "@toast/tokenservice-client": "1.0.11",
     "ansi-colors": "4.1.3",
-    "canvas": "2.11.2",
     "dayjs": "1.11.10",
     "discord.js": "14.14.1",
     "fast-xml-parser": "4.3.4",

src/commands/mp.ts

@@ -62,7 +62,7 @@ export default class MP {
           .setImage(`attachment://${attachmentName}`)
           .setAuthor({name: `${DSS.slots.used}/${DSS.slots.capacity}`})
           .setFooter({text: `Current time: ${('0'+Math.floor((DSS?.server.dayTime/3600/1000))).slice(-2)}:${('0'+Math.floor((DSS?.server.dayTime/60/1000)%60)).slice(-2)}`})
-        ], files: [new client.attachment(canvas.toBuffer(), {name: attachmentName})]})
+        ], files: [new client.attachment(canvas.toBuffer('image/jpeg'), {name: attachmentName})]})
       },
       details: async()=>{
         const DSS = await fetchData(client, interaction, choiceSelector) as FSData;

src/commands/rank.ts

@@ -42,7 +42,7 @@ export default class Rank {
             name: 'Top users sorted by messages sent:',
             value: allData.sort((a,b)=>b.messages - a.messages).slice(0,15).map((x,i)=>`${i+1}. <@${x.dataValues.id}>: ${x.messages.toLocaleString('en-US')}`).join('\n')
           }).setImage('attachment://dailyMessages.jpg').setFooter({text: 'Graph updates daily'})],
-          files: [new client.attachment(graph.toBuffer(), {name: 'dailyMessages.jpg'})]
+          files: [new client.attachment(graph.toBuffer('image/jpeg'), {name: 'dailyMessages.jpg'})]
         })
 			},
       notification: async()=>{

src/components/CanvasGraph.ts

@@ -1,9 +1,9 @@
-import {createCanvas, Canvas, CanvasRenderingContext2D} from 'canvas';
+import {createCanvas, Canvas, SKRSContext2D} from '@napi-rs/canvas';
 import {Config} from 'src/interfaces';
 import ConfigHelper from '../helpers/ConfigHelper.js';
 export default class CanvasBuilder {
   private readonly canvas: Canvas;
-  private readonly ctx: CanvasRenderingContext2D;
+  private readonly ctx: SKRSContext2D;
   private readonly config: Config;
   private readonly palette = {
     // Color palette for the graph -- The variables are named exactly what it shows in graph to make it easier to be referenced to.
@@ -119,7 +119,7 @@ export default class CanvasBuilder {
     }
 
     // Draw text
-    this.ctx.font = '400 ' + textSize + 'px sans-serif';
+    this.ctx.font = `400 ${textSize}px Ubuntu`;
     this.ctx.fillStyle = this.palette.textColor;
 
     // Highest value