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.

Usage

mod.ts provides a default export exposing the complete CanvasKit API, and other exports from the file are types and utility functions.

import { createCanvas } from "https://deno.land/x/canvas/mod.ts";

const canvas = createCanvas(200, 200);
const ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200 - 20, 200 - 20);

await Deno.writeFile("image.png", canvas.toBuffer());

And run with deno run --allow-write filename.ts.

You can also try this HTTP server example, https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/master/examples/square.ts

For using images, use loadImage method exported from mod.ts.

const image = await loadImage(myURL);
ctx.drawImage(image, x, y);

For custom fonts, including Emoji support, use the loadfont method:

const font = await Deno.readFile("NotoColorEmoji.ttf"); // Path to font file
const canvas = createCanvas(128, 128);
const ctx = canvas.getContext("2d");
canvas.loadFont(font, { family: 'Noto Color Emoji' });
ctx.font = "105px Noto Color Emoji";
ctx.fillText('🚜', 0, 90);

Limitations

Just like original canvaskit-wasm, the emulated Canvas has some limitations:

measureText returns width only and does no shaping. It is only sort of valid with ASCII letters.
textAlign is not supported.
textBaseAlign is not supported.
fillText does not support the width parameter.

Alternative

There is also skia_canvas.

Fast & low-overhead, 2x performance improvement
Above mentioned limitations are not present, in fact there are no limitations
Uses FFI instead of WASM

License

Check LICENSE for more info.