QUESTION abou SKIA + NODE + NAPI

[asturur]

@chearon @zbjornson i wanted to start a question/conversation

https://github.com/google/skia/tree/master/modules/canvaskit

This thing here is an emscripten port of skia and works as a JS + WASM replacement of canvas ( also in node )
Could the C source code, before being emscripten converted, be easily converted in a NAPI module and be as much performant as possible? would be this a even more greater node-canvas library?

[zbjornson]

I don't have an exact answer, but that's one possibility I've been wondering about too. Ideas on my radar:

1. Start over based on Skia, using C++.
   Benefits: Skia has more features built-in, including webp and filters.
   Uncertainties: text shaping, as @chearon points out further down in this thread: Add support for WebP decoding #1280 (comment)
   @samizdatco has a Rust+Skia based implementation here that looks exciting: https://github.com/samizdatco/skia-canvas

2. Skia, but using WASM build.
   Benefits: above, plus no C++ build.
   Uncertainties: performance

3. Grab Firefox's implementation and make Node.js bindings for it.
   Uncertainties: feasibility

(I'm not letting myself start on this stuff until I finish a libuv PR I've been working on for a year. I of course won't block anyone who wants to try these things, and I'll help where I can!)

[asturur]

i do not have the time and the skill for a project full start. But i would love to be part of it.

I m more on the side of compatibility and feasibility rather than performances

[zbjornson]

If/when I start work on it, I'll keep you posted!

[kenotron]

FWIW, we tried using CavnasKit, and it was maybe 70-80% there until we realized the WASM code leaked memory like crazy and then the .js portion is missing all kinds of text alignment stubs. So, beyond pure WASM perf diffs, there is a possible problem of having to re-create instances of canvas to get around leaky memory issue.

@statm looked at this before

[asturur]

Well or contribute and fix them.
Alignment stubs are easily done if you have a ok way to measure font. So far the biggest thing i m looking at is consistency between browser and non browser. And the problem are always only around text and weird blending things.

[chearon]

So far the biggest thing i m looking at is consistency between browser and non browser. And the problem are always only around text and weird blending things.

Are browsers even consistent with themselves across different hardware? I'd think not.

I don't understand much of the Skia source, but it looks like it can use HarfBuzz to shape text, so we could get consistent shaping across all platforms with it.

I also have played around with shaping/rendering in JS/WASM but we're pretty far from being able to do that I think. HarfBuzz's official WASM build is missing a lot of features that are needed for a high quality implementation, like vertical text features. I should be working on that soon for a related project though.

[asturur]

Browsers are consistent between themselves, with exception of old bad supported intel gpu. But otherwise i would say yes.

Is vertical text a native canvas api? i did not know.

[asturur]

What create inconsistencies is also sometimes font subhinting/anti aliasing settings in the SO would influence text measurements api. But all
small things very small

[danielyaa5]

Was canvaskit faster?

[satoren]

I also tried canvaskit.
It took 2 minutes to load wasm on raspberrypi zero (Node.js v10.23.0).
Once loaded, it's not slow, but the native code is still faster.

The difference in performance on a PC cannot be discerned, as we have not rigorously benchmarked it.

[Brooooooklyn]

I started a new project using skia + rust + napi recently: https://github.com/Brooooooklyn/skia-rs

It's still in very early stage, and it will be my first priority side project in 2021.

For now, I have a minimal benchmark suite and it seems faster than node-canvas, the benchmark could be found at: https://github.com/Brooooooklyn/skia-rs/blob/main/benchmark/bench.ts

❯ yarn bench
yarn run v1.22.10
$ node -r @swc-node/register benchmark/bench.ts
Running "Draw house" suite...
Progress: 100%

  @napi-rs/skia:
    37 ops/s, ±0.42%   | fastest

  node-canvas:
    27 ops/s, ±1.01%   | slowest, 27.03% slower

Finished 2 cases!
  Fastest: @napi-rs/skia
  Slowest: node-canvas
✨  Done in 21.20s.

And of course it will be easy to install, no prebuild or download phases needed.

[asturur]

oh i ll play with it as a backend for fabricjs, does it support a bit of text yet?

[Brooooooklyn]

oh i ll play with it as a backend for fabricjs, does it support a bit of text yet?

No I haven't start text working yet, I will add a checklist in @napi-rs/skia to show features done/undo.

[Brooooooklyn]

Roadmap for @napi-rs/skia

[asturur]

I hope to get some time to familiarize with the codebase.

[yisibl]

@asturur measureText has been released: https://github.com/Brooooooklyn/canvas/releases/tag/v0.1.0

[timfish]

Having problems building node-canvas for recent versions of Electron. How easy would it be to swap it out for @napi-rs/canvas?

The roadmap shows that a lot is working!