Automattic / Automattic/node-canvas

Move non-standard API out of the Canvas class

Open
#833 4 comments 5 reactions 0 assignees View on GitHub
semver-major
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

I would like to move all of the non-standard APIs out from the `Canvas` class, and make the `Canvas` class follow the specification to the letter.

The benefit of this would be to be able to provide a `browser.js` file with a small shim for out specific APIs, which we could also make in the browser. Then you would be able to write truly isomorphic code that works both on Node.js and in the browser, which I think would be awesome 🙌

It would also allow us to ship some better image loading apis out of the box. The `onload` and `onerror` properties seems quite dated.

I'm thinking something like this, but are very open to suggestions:

`createCanvas([width[, height[, format]]]) => Canvas`

Creates and return a `Canvas` with the specified width and height. `format` is for pdf generation which would not work in the browser.

`loadImage(path[, options]) => Promise`

Creates and returns a `Promise` of an `Image`. This would be a shorthand for creating an `Image` manually, setting the `src` and hooking into the `load` and `error` events.

The `options` object could be used for setting the `dataMode`, which would be a no-op in the browser.

`imageFromBuffer(buffer) => Image`

Create an image from a buffer. This should create the image immediately since all the data is available and no IO needs to be performed.

`registerFont(fontPath, fontSettings) => Void`

Register a new font. This could potentially work in the browser by constructing a stylesheet that we append `@font-face`s to. Good thing we followed the `@font-face` definition as closely as we could 👍

`createPngStream(canvas[, options]) => ReadableStream`
`createJpegStream(canvas[, options]) => ReadableStream`

Not exactly sure how, or even if, these should work in the browser...

`getBuffer(canvas) => Buffer`
`getPngBuffer(canvas[, options]) => Buffer`
`getJpegBuffer(canvas[, options]) => Buffer`

Not exactly sure how, or even if, these should work in the browser...

Apart from these functions, we should probably export the `Image` class and maybe the `Canvas` class as well. Although the `Canvas` class is actually called `HTMLCanvasElement` in the browser and there is no way to call `new` on it.

As always, any input is appreciated 🙌

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.