Show HN: Skia-canvas, a browserless implementation of the Canvas API for Node.js

https://github.com/samizdatco/skia-canvas

by _samizdat • 6 years ago

187 65 6 years ago

gfxgirl• 6 years ago

I'm curious, what if anything is different from node-canvas? Not that I'm complaining in any way, just curious.

Keverw2• 6 years ago

Wonder if maybe it has less dependencies, that would be a win. like for example on Mac you need cairo pango libpng jpeg giflib librsvg for Node Canvas. So got to note it down for devs to put on their machines, and then remember to also add the same packages to the containers for deployment or if not using containers install on the server directly. I was playing with Node Canvas ages ago to create placeholder profile pics pngs using a random color background and letter.

wffurr• 6 years ago

This uses the Skia backend instead of Cairo. It will give results closer to Chrome's Canvas implementation.

It also doesn't appear to support Windows yet, whereas node-canvas does.

There's probably other differences, e.g. performance, size, etc. but you'd have to measure them.

adamnemecek2• 6 years ago

If you are looking for a Rust native, not too complicated implementation of canvas api, check out https://github.com/cytecbg/gpucanvas. It's a rust port of nanovg.

Check the demo by running 'cargo run --example demo'.

adamnemecek2• 6 years ago

I'll be adding more backends to this. I'm almost done with a metal backend (https://github.com/adamnemecek/gpucanvas), I'll add vulkan and wgpu next. If you want to get involved, we are definitely looking for contributors!

It's a really good way to understand 2d graphics.

tenaciousDaniel• 6 years ago

Calling it "server-side canvas" really throws me off. Why would a drawing API be needed on a server? For headless rendering?

If the benefit is to use the drawing API in a Node context outside of a server environment, that makes more sense to me.

chrisco255• 6 years ago

For outputting to static files, like JPEG or PDF.

untog2• 6 years ago

Why would a drawing API be needed on a server?

There are plenty of reasons to want to generate an image dynamically on a server. Dynamic image resizing to fit client requirements is one that immediately comes to mind.

pier256• 6 years ago

Or dynamic images for emails

pier256• 6 years ago

I can totally see myself using it to render PDFs server side (invoices, reports, etc).

jperras• 6 years ago

I have definitely needed this exact functionality in the recent past.

We had an application where a canvas-based editor was used to create diagrams, and then these diagrams were saved to a library. We wanted to have each saved diagram to have a preview image to better visually distinguish between them while scrolling. The ability to render a png on the server from the canvas would have saved us a lot of trouble.

enobrev• 6 years ago

I have built quite a few rendering servers for various use using canvas.js and nodejs. I also built a prototype for a dynamic video rendering server once - also based upon nodejs and canvas.js. It was slow but worked out as a proof of concept that became a fairly successful startup.

giovannibonetti2• 6 years ago

I was thinking on creating a turn-based multiplayer game for group chat in an app like Telegram. Then, whenever a player gave a command the server would draw the board and send the updated image to the chat.

It could start with something simple like tic-tac-toe and only two players. A player would tell the app a number between 1 and 9 corresponding to the place he/she chose. Then the server/bot would send the updated image to the conversation.

What do you think? :)

mufufu• 6 years ago

Not sure why that would have to be done server side though, couldn’t the server only be used for coordination/maintain state and then submit the current state/positions to the client and the client would render the board?

deft• 6 years ago

Someone I know is doing exactly this (well for discord) and I thought it was genius.

andrewaylett• 6 years ago

I once set up a large bank (you've probably heard of the bank, you've almost certainly not used this specific project though) with server-side Adobe Flex. We were using Flex to display charts on the client, and needed a way to render the same charts for use in reports.

This would be really useful for similar modern projects.

core-questions• 6 years ago

Why would a drawing API be needed on a server? For headless rendering?

15 years ago I was driving GD and ImageMagick from PHP to render things like staff ID cards, barcode labels for things, etc.

It was trivial to write a script that would render something quickly and just output raw image data, so you could <img src="whatever.php?name=Joe&department=Meat" /> and the image would be dynamically created and sent with the right MIME type.

Plenty of great use cases for this.

dwhitney• 6 years ago

Server Side Rendering is a good use case. If you want to pre-render a data visualization that can be loaded with a web page, you can use something like this in place of the browser's canvas, but use the same code to generate the data visualization

sergeykish• 6 years ago

To render all sort of dynamic information:

* visitors counter

* request IP

* game stats in forum signature (implemented this with gd and ruby)

scrollaway• 6 years ago

I previously worked on an in-browser Hearthstone card renderer that uses Canvas. The rendering needed to be client-side for dynamic use cases (where the card would receive various effects thus change its look).

However I also needed to implement a server-side version of it that prerendered all the cards to PNG so that they're browsable without having clients consume excessive cpu/battery. Doing it using a separate codebase would have been hell to reconcile. Hence node-canvas.

iamdbtoo• 6 years ago

I once built a simple website for a Netflix show where you could enter some text and it'd be played in an animation, but you could also save/share a video of it.

It was so much easier to build the animation in canvas for the site and just replay it to get frames for a video on the server than to try to make the video in some other environment and then show it in the browser.

hombre_fatal• 6 years ago

You're wayyy off here. There are all sorts of reasons to generate draw images on a server. Just look up imagemagick. And canvas has a much better drawing API and libraries for drawing that would be compatible.

untog2• 6 years ago

If you're already using Rust, an alternative might be raqote, which would avoid the need to interface with C++ at all... and it's the canvas library used by Firefox's Servo:

https://github.com/jrmuizel/raqote

gardaani• 6 years ago

The good things about raqote is that it's a Rust library so it may be safer than Skia. Raqote is also easier to compile than Skia.

The downside is that it's slower than Skia [1].

But, it should be possible to modify skia-canvas to work with raqote. The JS API would stay the same.

[1] https://twitter.com/pcwalton/status/1252281006263988224

muizelaar• 6 years ago

Raqote is also noticeably faster than it was in April. Still not as fast as Skia but getting closer.

pier256• 6 years ago

How does text rendering on images work on different platforms? Do you always get the same result regardless of the platform?

I'm asking because usually Skia produces different aliasing results on different platforms (eg: Windows vs macOS).

paraboul5• 6 years ago

Not the author, but user of Skia on daily basis.

It depends. Skia can either be used as software or GPU renderer.

GPU AA rendering can slightly differs when using MSAA. When MSAA is turned on, Skia has different path renderer strategies (that could be CPU-based, like SDF, or GPU-based using coverage counting). In that case (msaa turned off), AA result should be identical on all platforms, at the cost of performance.

mtklein• 6 years ago

Having looked at Skia against a lot of different OS/GPU/driver combinations, I would be surprised to see bit identical results from GPU rendering except perhaps across different nvidia cards. I wouldn't even necessarily expect identical results in replicated runs on the same machine.

Worth keeping in mind that what Skia's GPU backend decides to do depends on GPU features, and sometimes on GPU workarounds. There's no guaranteed way to force it to render identically on all platforms short of something like swiftshader.

c-smile3• 6 years ago

If by "on different platforms" you mean "on different server platforms" then result will be different but close enough.

On Windows, for example, Skia will render text closer to Direct2D/DirectWrite. On MacOS to CoreText.

For the reference, here is rendering of the same UI (HTML/CSS) in Sciter using Direct2D (left) and Skia/OpenGl (right):

https://sciter.com/wp-content/uploads/2020/09/d2d-vs-skia.pn...

pier256• 6 years ago

On Windows, for example, Skia will render text closer to Direct2D/DirectWrite. On MacOS to CoreText.

So what you're saying is that Skia changes the aliasing to look like the platform it's running on?

Damn, I wish I could make Chrome on Windows render text like it does macOS.

paraboul5• 6 years ago

Also depends what you mean by rendering. Skia also uses system library for font shaping (CoreText on macOS and direct2d on windows), but also has support for using harfbuzz instead (which works on any platform, even for WebAssembly).

sitkack• 6 years ago

Are there server side webgl implementations as well? Either GPU accelerated or pure software.

dhritzkiv3• 6 years ago

There's headless-gl (https://github.com/stackgl/headless-gl). Note: I'm a maintainer

modeless• 6 years ago

This looks great! You actually pass conformance? Any plans for WebGL 2, or SwiftShader?

kimown2• 6 years ago

But headless-gl need a DISPLAY, egl api provided by angle is not headless completely like Nvidia. https://developer.nvidia.com/blog/egl-eye-opengl-visualizati...

LAMike• 6 years ago

Anyone have a demo, or "Hello World" for this library?

aloer3• 6 years ago

What are the differences between this and canvaskit, the official wasm version (?) of skia?

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

Can be used with node as well

esrauch2• 6 years ago

This is a native dependency where that's compiling skia itself to wasm. The native dependency should be able to be faster by a wide margin by taking advantage of hardware acceleration but it's not obvious if it does (similarly skia compiled to wasm must be much slower than using the proper canvas API in the browser)

aloer3• 6 years ago

Why is wasm necessarily slower than the browser if the browser is already implementing canvas via skia? Just the hardware acceleration? Does that mean only gpu access or something more?

Not that that would make much sense. I’ve not been very successful at understanding what kind of problem canvaskit is trying to solve

What I am trying to do is the same as it was more than a year ago (https://news.ycombinator.com/item?id=20339574): A tile based, web based view with prerendered image tiles from the server and on the fly rendered tiles on the client. Ideally the client side rendering is super fast, whether that means gpu is enough or multi threaded cpu I don’t know yet

So what I understand so far is that I can’t have anything multithreaded (yet?) in the web client and probably native canvas is the most performant. Even canvaskit with webgl won’t reach that performance (not sure here)

Otoh canvaskit could possibly be used in other browsers if they don’t natively implement canvas via skia itself to minimize render diffs

And lastly this project here could be the backend renderer instead of either headless browser via canvas api (hacky) or canvaskit in node (slow because cpu only)

But none of these offer and kind of performance increase over native canvas which is limited to single thread because of spectre and meltdown

Sophistifunk• 6 years ago

Ugh, there's like ten of these. When will I be able to open a damned window and draw on it?

runbyfruity• 6 years ago

1973, with the Xerox PARC-developed Alto personal computer. It's still possible to do today.

dylan604• 6 years ago

Wouldn't that require a browser? What point is the browserless feature? Are non-browser UI applications being used that take advantage of Node.js? Is it for apps?

dheera• 6 years ago

can generate output in both raster (JPEG & PNG) and vector (PDF & SVG) image formats

I thought browser canvas was a completely raster tool? What if I drew a million lines onto skia-canvas -- which is something you can do in a browser canvas -- would that result in a huge stack of vector operations getting saved somewhere for the possibility of future vector export?

octref• 6 years ago

Nice work! The other day I was doing a SVG renderer for Shiki[0] (a code syntax highlighter), but found no easy way to measure font width/height (SVG needs absolute positioning) in Node.js. The only library that does that records fonts' metadata in the package source[1].

I ended up using puppeteer[2]. Would love to switch to `skia-canvas`, however `ctx.measureFont` doesn't seem to work correctly yet. Measuring cap `M` produces positive `actualBoundingBoxDescent`, although `M` should sit comfortably on top of baseline.

[0] https://shiki.matsu.io/

[1] https://github.com/adambisek/string-pixel-width

[2] https://github.com/shikijs/shiki/blob/master/packages/render...

phoe-krk• 6 years ago

It does not seem to have a LICENSE file or any license mention in the README.

MikeCoats• 6 years ago

It looks like it's MIT licensed, according to their `package.json`.

https://github.com/samizdatco/skia-canvas/blob/master/packag...

Show HN: Skia-canvas, a browserless implementation of the Canvas API for Node.js

Related Stories