feat: add node-canvas compatibility

examples/image.ts

@@ -1,20 +1,18 @@
-import Canvas, { CanvasRenderingContext2D, dataURLtoFile, loadImage } from '../mod.ts'
-import { serve } from "https://deno.land/[email protected]/http/server.ts";
-
-const canvas = Canvas.MakeCanvas(200, 200);
-const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-
-ctx.fillStyle = 'red';
-ctx.fillRect(10, 10, 200 - 20, 200 - 20);
-
-const img = await loadImage("https://cdn.discordapp.com/emojis/587737413330272291.gif?v=1");
-ctx.drawImage(img, 100 - img.width() / 2, 100 - img.height() / 2);
-
-const data = dataURLtoFile(canvas.toDataURL());
-
-const server = serve({ hostname: "0.0.0.0", port: 8080 });
-console.log(`HTTP webserver running. Access it at: http://localhost:8080/`);
-
-for await (const request of server) {
-  request.respond({ status: 200, body: data });
+import Canvas, { loadImage } from '../mod.ts'
+import { serve } from "https://deno.land/[email protected]/http/server.ts";
+
+const canvas = Canvas.MakeCanvas(200, 200);
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'red';
+ctx.fillRect(10, 10, 200 - 20, 200 - 20);
+
+const img = await loadImage("https://cdn.discordapp.com/emojis/587737413330272291.gif?v=1");
+ctx.drawImage(img, 100 - img.width() / 2, 100 - img.height() / 2);
+
+const server = serve({ hostname: "0.0.0.0", port: 8080 });
+console.log(`HTTP webserver running. Access it at: http://localhost:8080/`);
+
+for await (const request of server) {
+  request.respond({ status: 200, body: canvas.toBuffer() });
 }

examples/square.ts

@@ -1,17 +1,15 @@
-import Canvas, { CanvasRenderingContext2D, dataURLtoFile } from 'https://deno.land/x/[email protected]/mod.ts'
-import { serve } from "https://deno.land/[email protected]/http/server.ts";
-
-const canvas = Canvas.MakeCanvas(200, 200);
-const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-
-ctx.fillStyle = 'red';
-ctx.fillRect(10, 10, 200 - 20, 200 - 20);
-
-const data = dataURLtoFile(canvas.toDataURL());
-
-const server = serve({ hostname: "0.0.0.0", port: 8080 });
-console.log(`HTTP webserver running. Access it at: http://localhost:8080/`);
-
-for await (const request of server) {
-  request.respond({ status: 200, body: data });
+import Canvas from '../mod.ts'
+import { serve } from "https://deno.land/[email protected]/http/server.ts";
+
+const canvas = Canvas.MakeCanvas(200, 200);
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'red';
+ctx.fillRect(10, 10, 200 - 20, 200 - 20);
+
+const server = serve({ hostname: "0.0.0.0", port: 8080 });
+console.log(`HTTP webserver running. Access it at: http://localhost:8080/`);
+
+for await (const request of server) {
+  request.respond({ status: 200, body: canvas.toBuffer() });
 }

mod.ts

@@ -1,26 +1,28 @@
-import * as lib from "./lib.js";
-import { CanvasKit } from "./types.ts";
-import { fetchAuto } from './deps.ts'
-
-const Canvas = await lib.CanvasKitInit({}) as CanvasKit;
-
-export function dataURLtoFile(dataurl: string) {
-    let arr: string[] = dataurl.split(',');
-    let bstr = atob(arr[1]);
-    let n = bstr.length;
-    let data = new Uint8Array(n);
-    while(n--){
-        data[n] = bstr.charCodeAt(n);
-    }
-    return data;
-}
-
-export async function loadImage(url: string) {
-    const base64 = await fetchAuto(url);
-    const img = Canvas.MakeImageFromEncoded(dataURLtoFile(base64));
-    if(!img) throw new Error("Invalid Image");
-    return img;
-}
-
-export * from "./types.ts"
+import * as lib from "./lib.js";
+import { CanvasKit } from "./types.ts";
+import { fetchAuto } from './deps.ts'
+
+const Canvas = await lib.CanvasKitInit({}) as CanvasKit;
+
+export function dataURLtoFile(dataurl: string) {
+    let arr: string[] = dataurl.split(',');
+    let bstr = atob(arr[1]);
+    let n = bstr.length;
+    let data = new Uint8Array(n);
+    while(n--){
+        data[n] = bstr.charCodeAt(n);
+    }
+    return data;
+}
+
+export async function loadImage(url: string) {
+    const base64 = await fetchAuto(url);
+    const img = Canvas.MakeImageFromEncoded(dataURLtoFile(base64));
+    if(!img) throw new Error("Invalid Image");
+    return img;
+}
+
+export const createCanvas = Canvas.MakeCanvas
+
+export * from "./types.ts"
 export default Canvas