Skia Canvas

Fast HTML Canvas API implementation for Deno using Skia.

Example

import { createCanvas } from "jsr:@gfx/canvas@0.5.6";

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

// Set line width
ctx.lineWidth = 10;

// Wall
ctx.strokeRect(75, 140, 150, 110);

// Door
ctx.fillRect(130, 190, 40, 60);

// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

canvas.save("image.png");

Usage

Since this library depends on the unstable FFI API, you must pass --allow-env, --allow-ffi and --unstable-ffi flags. Without it, the module will fail to find and open native library.

deno run --allow-ffi --allow-env --unstable-ffi <file>
# or just
deno run -A --unstable-ffi <file>

API

Check the API reference here.

Since this module implements the Canvas Web API, you can also refer to the MDN docs.

Non-standard APIs

For non-standard APIs, see to the API reference mentioned above.

• Canvas#save - save canvas render as file
• Canvas#encode - encode render into in-memory buffer
• Image - provides utility to load image files for drawing on canvas
• Fonts - provides utility to manage fonts used by Skia
• PdfDocument - create PDF documents using 2D Canvas API
• SvgCanvas - like Canvas but creates an SVG as output instead
• Several additional methods in Path2D object such as toSVGString, simplify, difference, xor, etc.

Benchmarks

Source: bench/main.js

Building

First you need to setup depot_tools.

Then, clone the repository with submodules.

And run the following commands:

deno task build-skia
deno task build

By default, the module will download and cache the prebuilt binaries for your platform. However this is not intended behavior when developing locally. To use locally built binaries, set DENO_SKIA_LOCAL environment variable to 1. Or you can also set DENO_SKIA_PATH to a complete path to dynamic library built from the native directory.

License

Apache-2.0 licensed.

Copyright 2022-present © DjDeveloperr