Skip to main content

Skia Canvas

Tags Doc Checks License Sponsor

Fast HTML Canvas API implementation for Deno using Skia.

Example

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

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 flags. Without it, the module will fail to find and open native library.

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

API

Check the API reference here.

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

For non-standard APIs, refer to the API docs mentioned above.

Non-standard APIs

For non-standard APIs, refer to the API docs 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

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 © DjDeveloperr