Live data from Hacker News

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

skia-canvas.org

31–40 of 91 posts

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

#31

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

It implements the HTML Canvas API.

That's not necessarily better or worse, it's just potentially helpful if you've got lots of Canvas-based code lying around you want to run outside a browser environment.

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

#33
post #5

Huh, it's more than just a rendering API: "can render to windows using an OS-native graphics pipeline and provides a browser-like UI event framework". They could add wgpu to get WebGPU support and ANGLE to get WebGL support.

Skia is a widely used library (off the top of my head, Chrome, Firefox, and LibreOffice use it) that supports lots of rendering targets, including WebGPU and ANGLE.

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

#34
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?

Yes I would like to know this too. There are various people saying they use this (or things like it) but nobody is saying what they are actually doing with it.

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

#35

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.

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

#36
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?

I would imagine that you could use it to write automated tests for Canvas code (maybe charts?) running in Node, e.g., jest with snapshots.

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

#37
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?

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.

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

#38
post #37
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?

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 ?

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

#39
post #17

Earlier quoted context omitted.

Canvas is one of the easiest browser APIs to implement because most of it maps 1:1 to PostScript-style 2D APIs. It was created by Apple as a wrapper for CoreGraphics back around Mac OS X Tiger 10.4. (IIRC, Canvas even debuted in Apple's Dashboard widgets rather than Safari? I'm not 100% sure.) I remember writing my own Canvas implementation around 2008-2009 using JavaScriptCore and CoreGraphics. It took maybe two day…

I'd love to learn more about how your 2 day implementation did fillText (incl full unicode rendering, proper text shaping etc)

I'm not claiming I implemented everything from scratch. Since it was a Mac OS X Cocoa app, it would just call the APIs available on that platform, like Apple's original Canvas implementation in WebKit.

Also since this was a video application running custom scripts written specifically for that host app, there wasn't a big worry about exact compatibility with any other Canvas-using code.

Anyway, here's the old code that doesn't look like there's anything interesting going on:

https://github.com/pojala/lacqit/blob/main/Lacqit/LQJSBridge...

Looks like I misremembered — it's using Cairo rather than CoreGraphics. I don't remember why that was.

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

#40
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?

I would imagine that you could use it to write automated tests for Canvas code (maybe charts?) running in Node, e.g., jest with snapshots.

Yes, I'm doing exactly this with https://www.npmjs.com/package/jest-image-snapshot
Post reply on HN