djdeveloperr / deno-canvas

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

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.

Copyright 2022 © DjDeveloperr

deno-canvas's Issues

deno-canvas canvas & 2D context & image objects do not match the browser

This is from a deno issue, denoland/deno#18919
The response was:

that module is a third party module maintained by the community, not an official module maintained by Deno. I'd recommend opening an issue on the repository of the module.

Here's the issue & thanks for the great project!

---

A few experiments show that the deno-canvas's canvas, context, and image objects do not match the browsers. This makes it difficult to impossible to have interoperability between deno and browsers, a goal of many of us.

Some examples:

// copy/paste these into a deno repl (deno repl -A)
import {
    createCanvas,
    loadImage,
} from 'https://deno.land/x/[email protected]/mod.ts'

// creaate image, canvas & ctx
const imgUrl = 'https://code.agentscript.org/models/data/redfish.png'
const img = await loadImage(imgUrl)
const can = createCanvas(200, 200)
const ctx = can.getContext('2d')

// 1: ctx has a flawed canvas object:
typeof ctx.canvas // OK, "object"
// but it isn't!
ctx.canvas.width // TypeError: Cannot read properties of null!
Object.keys(ctx) // shows no canvas object!
ctx.canvas = can // TypeError: Cannot assign to read only property 'canvas' of object

// 2: ctx has width & heigh while in browser ctx.canvas has the width & height
// see above

// 3: img width & height are functions, not properties as in browser
img.width // [Function: Image$width]
img.width() // works: 512

// 4: prototype programming fix works for ctx.canvas, but alas not for img
const ctxObj = {
    canvas: can,
}
Object.setPrototypeOf(ctxObj, ctx)
ctxObj.canvas  // OK
ctxObj.canvas.width  // OK

const imgObj = {
    width: img.width(),
    height: img.height(),
}
Object.setPrototypeOf(imgObj, img)
ctx.drawImage(imgObj, 0, 0, can.width, can.height) // TypeError: k.width is not a function
ctx.drawImage(imgObj, 0, 0, imgObj.width, imgObj.height) // Ditto

---

I believe the man problem is Image using functions for width/height, we might be able to work around the rest. Or do you have an insight how we might work around that issue too?

Thanks!

`CanvasKitInit` not found

When running this code using deno run -A ... I get this error: The requested module 'https://deno.land/x/[email protected]/mod.ts' does not provide an export named 'CanvasKitInit'

My Code:

import { CanvasKitInit } from "https://deno.land/x/[email protected]/mod.ts"

const kit = await CanvasKitInit({
	// What path would you use for locating files in deno?
	locateFile: (file) => '/node_modules/canvaskit-wasm/bin/' + file,
})

const surface = kit.MakeSurface(100, 100)!
const canvas = surface.getCanvas()!

const paint = new kit.Paint()
paint.setColor([255, 0, 0, 255])
canvas.drawCircle(25, 25, 20, paint)

const image = surface.makeImageSnapshot()!
const bytes = image.encodeToBytes()!
Deno.writeFileSync('image.png', bytes)

Before using this package I tried using canvaskit-wasm and got similar errors.

Same code but with a slightly modified header:

import CanvasKitInit from 'npm:canvaskit-wasm'

CanvasKitInit.default({ // ...

SVG images

I noticed while working on #14 that base64 SVGs don't work, or even regular SVG urls, in loadImage()

canvas.toBuffer("image/jpeg") still makes a PNG

According to types.ts and lib.js, toBuffer() should accept type argument and support "image/png" as well as "image/jpeg". However, a PNG image is created even if "image/jpeg" is specified.

PNG's can be pretty big for photos, JPG would be nice to have thumbnail creation and such.

Can't draw canvas over canvas!

let canvas = createCanvas(500, 500);
let anotherCanvas = createCanvas(50, 50);
canvas.drawImage(anotherCanvas, 0, 0); // Throws an error.

textAlign and textBaseline are not working

Tried setting textAlign and textBaseline. Does not make any difference

ctx.textAlign ="center";
ctx.textBaseline="middle";

Garbled characters in Japanese?

I draw Japanese letter. Is it the problem of my computer?

someone know how to fix it?

ctx.font = "40px serif"

i use this font.

Deno Deploy support

At the moment, this library does not run on Deno Deploy because it uses new Function to dynamically generate code. At these places exactly:

• https://github.com/DjDeveloperr/deno-canvas/blob/master/lib.js#L3983
• https://github.com/DjDeveloperr/deno-canvas/blob/master/lib.js#L4319

And Deploy runtime does not allow dynamic code generation.

Svg support?

I am using deno-canvas for making a test image and i was using a svg image url to load image but whenever i try to load image it throws me a error Invalid Image. But when using nodejs's canvas it works fine. Is the problem with svg or something? Here is my code to reproduce the error:

import Canvas, { dataURLtoFile, loadImage } from 'https://deno.land/x/[email protected]/mod.ts';

ctx.fillStyle = '#7298da';
ctx.fillRect(0, 0, 800 - 20, 800 - 20);
ctx.fillStyle = 'white';

await ctx.drawImage(await loadImage('https://weboverhauls.github.io/demos/svg/checkmark.svg'), 0, 0);
Deno.writeFileSync("test.png", dataURLtoFile(canvas.toDataURL()))

deploy sample(example/deploy.jsx) doesn't work

I want to use canvas for generating image.
My code does'nt work, so test the example and it failed too.

env

Deploy ver: deno deploy beta 3
example: example/deploy.jsx
deploy playground page: https://dash.deno.com/playground/share-weasel-79
result url: https://share-weasel-79.deno.dev/

result
playground page

log

21:51:01

isolate start time: 828714 us

21:51:03

EvalError: Code generation from strings disallowed for this context
    at new Function (<anonymous>)
    at Qb (https://deno.land/x/[email protected]/src/lib.js:3977:17)
    at Rb (https://deno.land/x/[email protected]/src/lib.js:3985:15)
    at Module.<anonymous> (https://deno.land/x/[email protected]/src/lib.js:5090:30)
    at init (https://deno.land/x/[email protected]/src/canvaskit.ts:6:22)
    at init (https://deno.land/x/[email protected]/src/canvas.ts:6:20)
    at https://deno.land/x/[email protected]/mod.ts:2:22

I fix the canvas source path(../src/canvas.ts -> https://deno.land/x/[email protected]/mod.ts)

please tell me why?

Can't create canvas with createCanvas(100, 100)!

Always returns width and height as undefined

base64 image

I am working on this cross-canvas demo to demonstrate using roughly the same code (with a different frame around it) in browser vs deno. I use a base64-image to keep the demo self-contained, and when I run it in deno, I get this:

../deno-pr-buffers/target/debug/deno run --unstable --allow-all ./examples/canvas_cross.js
error: Uncaught (in promise) NotFound: No such file or directory (os error 2)
    data = await Deno.readFile(url);
           ^
    at deno:core/01_core.js:106:46
    at unwrapOpResult (deno:core/01_core.js:126:13)
    at async open (deno:runtime/js/40_files.js:51:17)
    at async Object.readFile (deno:runtime/js/40_read_file.js:20:18)
    at async loadImage (https://deno.land/x/[email protected]/src/canvas.ts:28:12)
    at async Object.setup (file:///home/konsumer/Documents/otherdev/deno-minifb/examples/canvas_cross.js:51:19)
    at async mainDeno (file:///home/konsumer/Documents/otherdev/deno-minifb/examples/canvas_cross.js:67:3)

Do I need to do something special to base64 images?

drawImage does not support using a canvas as the image

In the browser, drawImage can take a canvas in place of an image as an argument, which is very useful for when doing drawing/compositing operations. The following would be expected to work:

import { createCanvas} from "https://deno.land/x/canvas/mod.ts";
let canvas_a = createCanvas(800, 600);
let canvas_b = createCanvas(800, 600);
canvas_a.getContext("2d").drawImage(canvas_b, 0, 0);

When using deno-canvas, because drawImage expects an Image, the following error is thrown:

error: Uncaught (in promise) TypeError: k.width is not a function
                    arguments[3] || k.width(),
                                      ^
    at q.drawImage (https://deno.land/x/[email protected]/src/lib.js:2660:39)

You can work around this with:

if (environment() == 'deno')
    ctx.drawImage(await loadImage(canvas.toBuffer()), 0, 0);
else
    ctx.drawImage(canvas, 0, 0);

But this workaround generates a dependency on async, and makes sharing code across browser and client harder.

[Suggestion] Node Canvas like interface

It'd be great if you could implement node-canvas like interface to deno-canvas so that we don't have to rewrite everything 👍

Error loading wasm

I am getting the following error, which seems related to the wasm file not being found or not being able to load.

both async and sync fetching of the wasm failed
failed to asynchronously prepare wasm: RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
    at Ia (file:///Users/[email protected]/repos/deno-hack/deno-canvas/deno-canvas-master/lib.js:3879:13)
    at Gb (file:///Users/[email protected]/repos/deno-hack/deno-canvas/deno-canvas-master/lib.js:3907:11)
    at file:///Users/[email protected]/repos/deno-hack/deno-canvas/deno-canvas-master/lib.js:3919:20
error: Uncaught (in promise) RuntimeError: abort(RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.). Build with -s ASSERTIONS=1 for more info.
        a = new WebAssembly.RuntimeError(
            ^
    at Ia (file:///Users/[email protected]/repos/deno-hack/deno-canvas/deno-canvas-master/lib.js:3879:13)
    at file:///Users/[email protected]/repos/deno-hack/deno-canvas/deno-canvas-master/lib.js:6931:13

This happens with the example, both locally and loading from HTTP.

any way to use this live?

When I first saw this, I thought it might be a way to open a live canvas context and draw on the screen. It seems like from the examples, it's all offline (create canvas, draw on it, then save image.)

Is there interest in a live canvas? I am pretty new to deno & rust, but have dabbled with rust, and have a lot of experience with node. I'd love to help. It'd be awesome to be able to make a fast native game with roughly the same API as browser. What would be involved? Maybe sdl2 or something with webgpu?

Mention Skia Canvas as an alternative

Now that https://github.com/DjDeveloperr/skia_canvas exists, a lot of the use cases for deno-canvas should really be using skin-canvas. This should be mentioned in the README.

Null pointer when used as bundle or compiled

Hello,

thanks for this tool, it works great! But not when bundled:

import { createCanvas, loadImage } from "https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/master/mod.ts"

let canvas = createCanvas(200, 200)
let ctx = canvas.getContext("2d")
let img = await loadImage('img.jpg')
ctx.drawImage(img, 0, 0)

It works fine as deno run script.js. But when I deno bundle script.js bundle.js and deno run bundle.js or deno compile script.js (which presumably internally also calls deno bundle) and ./script, I get

error: Uncaught TypeError: Cannot read properties of undefined (reading 'MakeCanvas')
    return canvas.MakeCanvas(width, height);
                  ^
    at createCanvas (file:///b/some%20test/bundle.js:6752:19)
    at file:///b/some%20test/bundle.js:6754:15

Any idea why that could be? And how to solve it? Is it a Deno bug and should be reported there?

Thanks!

lib.js is obfuscated

Hi, this project looks very interesting. However when I'm trying to look into the source, I only found an obfuscated lib.js in the repo. Is the originally source code open source? Thanks.

bug for invalid code ctx.textAlign & ctx.textBaseline

ctx.textBaseline = 'middle'
ctx.textAlign = 'center'

invalid code
invalid code
invalid code
invalid code

RuntimeError: table index is out of bounds

The library seems to be unable to recycle the memory of images, it will crash if the total size of images loaded exceeds 2GB.

import { loadImage } from 'https://deno.land/x/[email protected]/mod.ts'
import { findAllFilenames } from 'npm:[email protected]'

let size = 0
try {
  for await (const filename of findAllFilenames('input')) {
    const stat = await Deno.stat(filename)
    await loadImage(filename)
    size += stat.size
  }
} catch (e) {
  console.error(e)
  console.log(`size: ${size}`)
}

RuntimeError: table index is out of bounds
    at <anonymous> (wasm://wasm/01b26af2:1:2812125)
    at <anonymous> (wasm://wasm/01b26af2:1:2712812)
    at <anonymous> (wasm://wasm/01b26af2:1:5312829)
    at <anonymous> (wasm://wasm/01b26af2:1:890213)
    at Object._decodeImage (eval at Uc (https://deno.land/x/[email protected]/src/lib.js:4504:15), <anonymous>:9:10)
    at Object.a.MakeImageFromEncoded (https://deno.land/x/[email protected]/src/lib.js:1488:25)
    at loadImage (https://deno.land/x/[email protected]/src/canvas.ts:33:22)   
    at eventLoopTick (ext:core/01_core.js:153:7)
    at async main.ts:8:5
size: 2139342932

BindingError: Expected null or instance of Image, got an instance of Image

BindingError: Expected null or instance of Image, got an instance of Image
I really don't know caused by what but thats the problem.

Error when trying to run example

When I try running the example code:

import Canvas from 'https://deno.land/x/[email protected]/mod.ts'
import { serve } from "https://deno.land/[email protected]/http/server.ts";

const canvas = Canvas.MakeCanvas(200, 200);
const ctx = canvas.getContext('2d');

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

const server = serve({ hostname: "0.0.0.0", port: 8080 });
console.log(`HTTP webserver running. Access it at: http://localhost:8080/`);

for await (const request of server) {
  request.respond({ status: 200, body: canvas.toBuffer() });
}

And then use the command deno run --allow-net main.ts (file name is main), I get the following error:

both async and sync fetching of the wasm failed
failed to asynchronously prepare wasm: RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
    at Ia (https://deno.land/x/[email protected]/lib.js:430:73)
    at Gb (https://deno.land/x/[email protected]/lib.js:431:158)
    at https://deno.land/x/[email protected]/lib.js:431:480
error: Uncaught (in promise) RuntimeError: abort(RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.). Build with -s ASSERTIONS=1 for more info.
    at Ia (https://deno.land/x/[email protected]/lib.js:430:73)
    at https://deno.land/x/[email protected]/lib.js:708:435

Doesn't work unless canvaskit.wasm is a local file

Nice work on this module! I had a go at using it but I quickly realised that you need to have the canvaskit.wasm file available locally (in the same directory as Canvas.MakeCanvas is called from), which is a little inconvenient.

I think this is unintentional--when you call Deno.readFileSync('./canvaskit.wasm') in lib.js, it reads the file relative to the user call, rather than the module.

Porting lib from [email protected]?

Is there any chance that deno-canvas will get canvaskit-wasm bumped to version 0.35.0?

long delay before and after script execution

I have noticed that importing this library will cause a long delay before my script is executed. I assume the delay before the script executes is because the wasm file is dynamically imported automatically

const Canvas = await lib.CanvasKitInit({}) as CanvasKit;

I do not know why there is an extra delay after my script executes though.

To illustrate how long the delays are, here is a simple benchmark. First the script using your library:

import Canvas from 'https://deno.land/x/[email protected]/mod.ts'
console.log(Date.now(), 'imports complete')


const canvas = Canvas.MakeCanvas(200, 200);
const ctx = canvas.getContext('2d');
console.log(Date.now(), 'created canvas & context')

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

await Deno.writeFile('image.png', canvas.toBuffer())
console.log(Date.now(), 'deno wrote buffer to png')

and a bash script timing the usage:

#!/bin/bash

millis() {
  echo $(($(date +%s%N)/1000000)) $1
}

deno install -f --allow-write ./canvas.ts
millis 'before script'
canvas
millis 'after script'

Here is the output:

./timer.sh
✅ Successfully installed canvas
/home/andrew/.deno/bin/canvas
1615473303762 before script
1615473305209 imports complete
1615473305213 created canvas & context
1615473305251 deno wrote buffer to png
1615473308244 after script

Thats a 1.447 second delay during import and a 2.993 second delay after the script finishes executing.

If these delays are absolutely necessary, it would be nice if we could at least control the lifecycle. E.g. instead of implicit importing and cleanup, expose an api for loading and cleanup:

import Canvas from 'https://deno.land/x/[email protected]/explicit_lifecycle.ts'

// we choose when to begin the slow load
await Canvas.load()
const canvas = Canvas.MakeCanvas(200, 200);
// do some stuff with the canvas...

// we choose when to perform cleanup
await Canvas.unload()

Support hsla color annotation

I realize this is probably an issue with canvaskit-wasm, but still it would be awesome if it worked (perhaps by inlcluding an additional small dependency). All the major browsers now support hsla, and all the other color annotations I tried worked (inc. rgba and hsl).

Reproduction steps:

const img1 = createCanvas(100, 100);
const ctx = img1.getContext("2d");
ctx.fillStyle = "hsla(0, 100%, 50%, 50%)";
ctx.fillRect(10, 10, 200 - 20, 200 - 20);
await Deno.writeFile("image.png", canvas.toBuffer());

when run on mac with arm64:

➜ Deno_Canvas deno run main.ts
✅ Granted ffi access to "/Users/charlesp/Tests/Deno_Canvas/node_modules/.deno/[email protected]/node_modules/.pnpm/[email protected]/node_modules/canvas/build/Release/canvas.node".
dyld[48551]: missing symbol called
[1] 48551 abort deno run main.ts
➜ Deno_Canvas

Can’t use on Deno Deploy

I’ve tried deploying this to Deno Deploy, and get the following error:

EvalError: Code generation from strings disallowed for this context
    at new Function (<anonymous>)
    at Qb (https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/v1.3.0/src/lib.js:3977:17)
    at Rb (https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/v1.3.0/src/lib.js:3985:15)
    at Module.<anonymous> (https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/v1.3.0/src/lib.js:5090:30)
    at init (https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/v1.3.0/src/canvaskit.ts:6:22)
    at init (https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/v1.3.0/src/canvas.ts:6:20)
    at https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/v1.3.0/mod.ts:2:22

https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/v1.3.0/src/lib.js

The culprit on line 3977 looks like:

function Qb(a, b) {
        a = Pb(a);
        return (new Function(
          "body",
          "return function " + a +
            '() {\n    "use strict";    return body.apply(this, arguments);\n};\n',
        ))(b);
      }

There‘s also another dynamic function on line 5884:

kb: function (a, b, c, f) {
          a = dd(a);
          var g = ld[b];
          if (!g) {
            g = "";
            for (var l = 0; l < b; ++l) g += (0 !== l ? ", " : "") + "arg" + l;
            var p = "return function emval_allocator_" + b +
              "(constructor, argTypes, args) {\n";
            for (l = 0; l < b; ++l) {
              p += "var argType" + l +
                " = requireRegisteredType(Module['HEAP32'][(argTypes >>> 2) + " +
                l + '], "parameter ' + l + '");\nvar arg' + l + " = argType" +
                l + ".readValueFromPointer(args);\nargs += argType" + l +
                "['argPackAdvance'];\n";
            }
            g =
              (new Function(
                "requireRegisteredType",
                "Module",
                "__emval_register",
                p +
                  ("var obj = new constructor(" + g +
                    ");\nreturn __emval_register(obj);\n}\n"),
              ))(ad, r, xc);
            ld[b] = g;
          }
          return g(a, c, f);
        },

Is there any way to change what these functions are doing without dynamic functions?

hsl support

For example setting fill style to hsl(0, 100%, 50%) would work in browser but does not work here.

[feature request] loading custom font support

deno-canvas supports writing text to a canvas:

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

const canvas = createCanvas(500,600)
const ctx = canvas.getContext('2d')
ctx.fillStyle='red'
ctx.fillText(50,50,"Hello World")
await Deno.writeFile("image.png", canvas.toBuffer());

this is currently only limited to fonts your system knows about (it might even be more limited than that). Canvas kit has an api for loading custom fonts https://skia.org/docs/user/modules/quickstart/#text-shaping. Itd be great if deno-canvas supported loading custom fonts. I think pulling in the whole paragraph builder api might be substantial, but all I would personally be interested in is mirroring the browser's canvas apis with the addition of being able to load custom fonts. E.g.

import { createCanvas, registerFont } from 'https://deno.land/x/canvas/mod.ts'

const canvas = createCanvas(500,600)
const ctx = canvas.getContext('2d')
await registerFont({
  font_family: 'Comic Sans',
  // extra fancy would be supporting a url here (e.g. file:///my-fonts/comic-sans.ttf or any web url)
  src: './my-fonts/comic-sans.ttf'
})
ctx.font = 'Comic Sans'
ctx.fillStyle='red'
ctx.fillText(50,50,"Hello World")
await Deno.writeFile("image.png", canvas.toBuffer());

the registerFont method is very similar to the css interface for loading fonts:

@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}