https://github.com/djdeveloperr/deno-canvas

Canvas API for Deno, ported from canvaskit-wasm (Skia).
https://github.com/djdeveloperr/deno-canvas

2d canvas canvaskit-wasm deno deno-canvas skia

Last synced: 4 days ago
JSON representation

Canvas API for Deno, ported from canvaskit-wasm (Skia).

• Host: GitHub
• URL: https://github.com/djdeveloperr/deno-canvas
• Owner: DjDeveloperr
• License: mit
• Created: 2020-11-23T05:24:51.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-03T06:12:27.000Z (4 months ago)
• Last Synced: 2025-01-29T02:45:02.346Z (4 days ago)
• Topics: 2d, canvas, canvaskit-wasm, deno, deno-canvas, skia
• Language: JavaScript
• Homepage: https://deno.land/x/canvas
• Size: 21.6 MB
• Stars: 193
• Watchers: 2
• Forks: 18
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# deno-canvas

Canvas API for Deno, ported from

[canvaskit-wasm (Skia)](https://github.com/google/skia/tree/main/modules/canvaskit).

## 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.

```ts

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`.

```ts

const image = await loadImage(myURL);

ctx.drawImage(image, x, y);

```

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

```ts

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:](https://github.com/google/skia/tree/main/modules/canvaskit/npm_build#known-issues-with-canvas2d-emulation-layer)

- 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](https://github.com/DjDeveloperr/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](./LICENSE) for more info.

Copyright 2022 © DjDeveloperr