OffscreenCanvas and CanvasRenderingContext2D

[codehz]

#1629 is about WebGL, it will likely take a lot of time to implement.
I think add OffscreenCanvas & CanvasRenderingContext2D interface at first is a good idea for now.
A lot of server-side image process like shields.io can be done in OffscreenCanvas with 2d renderer
(and it should be able to load image from disk / web / memory.)

• Maybe render text will be a problem
  Read from ttf directly? <- so we need a FontFace api with local file support
  Use system font registry?

[tdillon]

I've been eagerly awaiting canvas since I heard about Deno.

[DjDeveloperr]

What about using raqote for Canvas?

[Brooooooklyn]

I'm implementing skia-rs using NodeJS N-API, maybe it could also implement with Deno.

[andykais]

my alternative for now as been to use imagemagick, which requires users to install an external dependency, has no type safety, and has some very old, archaic apis

[andykais]

*actually I discovered a library that has been a pretty good solution https://github.com/DjDeveloperr/deno-canvas. It provides the canvas api as a wasm binary

import Canvas from 'https://deno.land/x/canvas@v1.1.1/mod.ts'

const canvas = Canvas.MakeCanvas(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())

[surma]

For completeness sake, I want to point out that there’s CanvasKit, which is Skia compiled to WebAssembly (Skia being the 2D graphics library that Blink uses to implement Canvas itself).

[lucacasonato]

@surma https://deno.land/x/canvas is built on CanvasKit. For native in the binary, we already include wgpu-core (the WebGPU engine for Gecko). If Skia will ever be able to use WebGPU as a rendering backend, it might make sense to include canvaskit or skia linked to wgpu-core (webgpu.h) right in the binary.

[surma]

Amazing news. Did not know about that. Thank you :)

[tdillon]

If Skia will ever be able to use WebGPU as a rendering backend, it might make sense to include canvaskit or skia linked to wgpu-core (webgpu.h) right in the binary.

This is way over my head, but is https://bugs.chromium.org/p/skia/issues/detail?id=12512 progress which would allow canvas native in Deno? 🤞

[andykais]

that would be very cool indeed. Another project has popped up in the meantime though https://deno.land/x/skia_canvas@0.3.1. SkiaCanvas backed by ffi rather than wasm

[DjDeveloperr]

The problem with emulated Canvas2D API of canvaskit is it doesn't support some APIs.

From https://www.npmjs.com/package/canvaskit-wasm

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.

And it has some performance issues as well. Which is why I made skia_canvas.

[lucacasonato]

I just talked with Leo about this, and we think it will be trivial to support at least OffscreenCanvas + GPURenderingContext (WebGPU) soon. This is not 2D rendering context, but it will allow rendering using WGSL shaders and exporting of the data to a blob / ImageBitmap.

[codehz]

I think text measuring and rendering are very important for server side image generation...

WebGPU, on the other hand, is not useful enough (for image generation, since you can only export one frame a time).

[crowlKats]

For 2DContext, we might consider using https://github.com/linebender/vello.

[andykais]

@crowlKats from their readme:

We aim to target all environments which can support WebGPU

Does this mean you would require bringing webgpu support back in first?

[crowlKats]

yes, which is coming in the upcoming release most likely.

[kyeshmz]

WebGPU is back as of 1.39, hopefully making this on track again!

[jerrieok]

<ctx.textAlign = 'center' and ctx_full.textBaseline = 'middle' > Invalid code wait fix bug