Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

skia-canvas.org

Post reply on HN
Print view View original

41–50 of 91 posts

Re: Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

#41

Post by adrianh »

rafaelmn wrote: post #38
adrianh wrote: post #37

Earlier quoted context omitted.

At Soundslice, we have a custom sheet-music-rendering graphics library in frontend JavaScript/Canvas. We also need to generate vector PDFs serverside — so we use a node library that speaks the HTML Canvas API and can generate PDFs. This way the result is exactly the same as the rendered sheet music in the web browser. Nice! The upshot is: this kind of library allows for code reuse in non-browser contexts.

Is Canvas really suitable for PDFs ? Afaik it's immediate mode bitmap graphics - so PDFs would just be embedded bitmaps ?

We do indeed generate vector PDFs, not embedded bitmaps.

Our graphics engine works with Canvas API instructions — like "draw a line from point (A,B) to (C,D)." This API is small enough and low-level enough that it can also generate pristine vector output.

That's in fact one of the features of Skia Canvas (vector output in PDF and SVG).

Re: Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

#42

Post by dpe82 »

wolfspider wrote: post #11
derefr wrote: post #8

Earlier quoted context omitted.

They're not saying Skia itself is browserless; they're saying that "Skia Canvas" is a non-browser-based implementation of what people would normally call the browser Canvas API.

Automattic created node-canvas a long time ago which was based around Cairo.

My previous startup Vidmaker created a browser-based collaborative video editor (think Google Docs for iMovie) in 2014 which did live preview in the browser and final render server-side. To use the same typescript-based "engine" for both we re-implemented most of the media browser APIs in NodeJS: 2d and 3d canvas, WebAudio, image APIs, something akin to HTML Video, etc. It worked amazingly well.

We got acqui-hired in 2015 and the product was shut down, but in hindsight I wish we'd open sourced at least those libraries.

Re: Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

#43

Post by rikroots »

kevingadd wrote: post #35
tantalor wrote: post #32

What does "based on Skia" actually mean? Is it a fork of Skia? Does it depend on Skia? Did somebody look at a design diagram of Skia and redo the whole thing from scratch? Did they read about Skia in a blogpost and get the gist of it?

In this context I would bet money that it's an implementation of the Canvas API that uses Skia underneath to do actual rasterization. It turns out (if you do a little research) that Firefox and Chrome have at various points in time used Skia as a backend for their own implementations of the Canvas API, too.

Reading the documentation, it seems to implement most (all?) of the Web Canvas API[1], and in certain areas extend the API in some exciting (well, exciting to me[2]) ways. The key point is that this can be used in the backend, far beyond the browser environment?

[1] https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

[2] The things that jump out to me as "exciting extensions" beyond the Api include: multiline text and text decoration (underlines!)[3]; perspective effects[4]; and Path2D boolean and filter operations[5].

[3] https://skia-canvas.org/api/context#textdecoration

[4] - https://skia-canvas.org/api/context#createprojection

[5] - https://skia-canvas.org/api/path2d

Re: Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

#44

Post by qwertox »

h1fra wrote: post #19

Out of curiosity, what's the use for such library? If you are on a desktop surely there is a better native library to draw shapes, no?

Server-side rendering of a track onto map tiles, enriched with other information like PoIs, distance marks, colorizing the track according to the speed, and so on, in order to then send it as a summary email to the customer.

Skia is the most modern library if you want to render shapes onto an image/surface.

According to the example `import {Window} from 'skia-canvas'` you can also use it to draw onto a spawned window on a desktop.

Re: Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

#45

Post by Matheus28 »

zazaulola wrote: post #27

How is it different from jimp? https://jimp-dev.github.io/jimp/ Maybe there are some killer features?

The only similarity between the two is that they deal with images.

That library only resizes and does other basic pixel level operations.

Skia is for drawing vector graphics.

Re: Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

#46

Post by steelbrain »

TheRealPomax wrote: post #24
jahewson wrote: post #22

Skia ships with a WASM build that supports node, called CanvasKit [1], whereas this module is Rust bindings? I’d be keen to know what the pros and cons of each approach are. 1. https://www.npmjs.com/package/canvaskit-wasm

Note that it's not so much "rust bindings" as a pre-compiled node binary (that happens to be generated off of a mixed Rust/C++ codebase). So that's really the main difference: WASM needs a separate runtime, whereas a node binary doesn't.

> WASM needs a separate runtime, whereas a node binary doesn't.

FWIW, node ships with a WASM runtime. See https://nodejs.org/en/learn/getting-started/nodejs-with-weba...

Re: Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

#47

Post by rafaelmn »

adrianh wrote: post #41
rafaelmn wrote: post #38

Earlier quoted context omitted.

Is Canvas really suitable for PDFs ? Afaik it's immediate mode bitmap graphics - so PDFs would just be embedded bitmaps ?

We do indeed generate vector PDFs, not embedded bitmaps. Our graphics engine works with Canvas API instructions — like "draw a line from point (A,B) to (C,D)." This API is small enough and low-level enough that it can also generate pristine vector output. That's in fact one of the features of Skia Canvas (vector output in PDF and SVG).

Ah nice didn't know it had a PDF backend - that sounds perfect for this use case.

Re: Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

#48

Post by brabel »

kevingadd wrote: post #35
tantalor wrote: post #32

What does "based on Skia" actually mean? Is it a fork of Skia? Does it depend on Skia? Did somebody look at a design diagram of Skia and redo the whole thing from scratch? Did they read about Skia in a blogpost and get the gist of it?

In this context I would bet money that it's an implementation of the Canvas API that uses Skia underneath to do actual rasterization. It turns out (if you do a little research) that Firefox and Chrome have at various points in time used Skia as a backend for their own implementations of the Canvas API, too.

> Firefox and Chrome have at various points in time used Skia as a backend for their own implementations of the Canvas API, too.

Skia is the graphics engine used by Chrome and Android to render everything: https://skia.org/

Re: Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

#49

Post by afavour »

h1fra wrote: post #19

Out of curiosity, what's the use for such library? If you are on a desktop surely there is a better native library to draw shapes, no?

Being able to run the same code on multiple platforms is a big bonus. It’s also a very common 2D drawing API. iOS has a native version, Android has a native version, all with more or less the same drawing operations. Leveraging them can pay dividends.

Re: Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node

#50

Post by colordrops »

h1fra wrote: post #19

Out of curiosity, what's the use for such library? If you are on a desktop surely there is a better native library to draw shapes, no?

Seems you could compile desktop apps to Web Assembly and distribute them without using some monstrosity like Electron.
Post reply on HN