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: 10 months 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 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-03T06:12:27.000Z (over 1 year ago)
- Last Synced: 2025-03-27T19:17:34.856Z (11 months ago)
- Topics: 2d, canvas, canvaskit-wasm, deno, deno-canvas, skia
- Language: JavaScript
- Homepage: https://deno.land/x/canvas
- Size: 21.6 MB
- Stars: 196
- Watchers: 2
- Forks: 20
- 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