search

Automattic / node-canvas

Node canvas is a Cairo backed Canvas implementation for NodeJS.
10.15k stars 1.17k forks source link

QUESTION abou SKIA + NODE + NAPI #1652

Open asturur opened 4 years ago

asturur commented 4 years ago

@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 commented 4 years ago

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: https://github.com/Automattic/node-canvas/pull/1280#issuecomment-429590004 @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 commented 4 years ago

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 commented 4 years ago

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

kenotron commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

Was canvaskit faster?

satoren commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

Brooooooklyn commented 3 years ago

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 commented 3 years ago

Roadmap for @napi-rs/skia

asturur commented 3 years ago

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

yisibl commented 3 years ago

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

timfish commented 2 years ago

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!