deno-canvas
Canvas API for Deno, ported from canvaskit-wasm (Skia).
Installation
Import from https://deno.land/x/canvas/mod.ts or just import from raw GitHub URL, https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/master/mod.ts.
Note
The WASM file is like 6mb in size, when you import it first time and “canvaskit.wasm” is not present in the current dir, this module will download it and attempt to save. It’s better to have it locally or at least give app --allow-write
permission to avoid downloading it all again, on every import. You may also download the file here from the repo and save it manually.
Usage
mod.ts
provides a default export exposing the complete CanvasKit API, and other exports from the file are types and util functions.
import Canvas, { CanvasRenderingContext2D, dataURLtoFile } from 'https://deno.land/x/canvas@v.1.0.5/mod.ts'
import { serve } from "https://deno.land/std@0.78.0/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 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() });
}
And run with deno run --allow-net --allow-read filename.ts
.
Or you can directly run from URL, https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/master/examples/square.ts
As mentioned before,
--allow-write
for first time will download wasm binary locally.
For using images, use loadImage
method exported from mod.ts
.
const image = await loadImage(myURL);
ctx.drawImage(image, x, y);