[HN Gopher] Skia Canvas: Browserless implementation of the HTML ...
___________________________________________________________________
Skia Canvas: Browserless implementation of the HTML Canvas drawing
API for node
Author : DaniAkash
Score : 140 points
Date : 2024-12-03 16:34 UTC (6 hours ago)
(HTM) web link (skia-canvas.org)
(TXT) w3m dump (skia-canvas.org)
| brabel wrote:
| Is this like a wrapper for the Rust crate?
|
| https://rust-skia.github.io/doc/skia_safe/canvas/struct.Canv...
| zxilly wrote:
| yes, generated by napi-rs
| jacobp100 wrote:
| Looks like it
| wslh wrote:
| I understand that a Skia Canvas should work with almost any
| programming language with just bindings [1]. I don't see
| anything in particular with Node.
|
| [1] https://www.swig.org/
| MortyWaves wrote:
| Kind of strange to call it browserless as though Skia requires
| one to begin with. Been using the .NET Skia library in CLI and
| desktop applications for a while.
| Matheus28 wrote:
| It's the "html canvas drawing api" that "browserless" refers to
| sroussey wrote:
| Node is a browserless JS engine. I don't see why saying
| browserless is weird.
| MortyWaves wrote:
| I don't think anyone ever thought Node was a browser thing
| though
| jasonjmcghee wrote:
| Thinking Node is related to the browser is not uncommon.
| They're both javascript and javascript means "browser" to a
| lot of (if not most) people.
| wslh wrote:
| Is not only that, Node was born from the V8
| implementation in Google Chrome, not the other way
| around.
| derefr wrote:
| 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.
| wolfspider wrote:
| Automattic created node-canvas a long time ago which was
| based around Cairo.
| mrieck wrote:
| Yeah that's been around for a while - I used node-canvas to
| generate frames to render to mp4 for my HTML canvas
| animation site:
|
| https://www.superanimo.com
|
| Looks like it would have been a lot easier if this existed
| back then. (haven't worked on the site for 5+ years)
| dpe82 wrote:
| 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.
| pavlov wrote:
| 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 days. I used it for a video application where JS
| plugins needed to render 2D graphics but I couldn't provide a
| browser engine because that would have been too slow and
| unpredictable for render functions that get called in the
| video render loop.
| skrebbel wrote:
| I'd love to learn more about how your 2 day implementation
| did fillText (incl full unicode rendering, proper text
| shaping etc)
| pavlov wrote:
| 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/LQJSBri
| dge...
|
| Looks like I misremembered -- it's using Cairo rather
| than CoreGraphics. I don't remember why that was.
| modeless wrote:
| 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.
| dekhn wrote:
| That's very similar to what Qt already provides (QPainter, for
| raw image/windows, more sophisticated widgets with event
| support. Further- and this is something I've been looking for a
| while- they have a graphicsview that allows resolution-
| independent rendering of millions of objects, with events, in
| an larger-than-window graphics plane.
| genter wrote:
| 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.
| modeless wrote:
| I don't mean WebGPU and WebGL as Skia backends. I mean WebGPU
| and WebGL as APIs that this library could expose to users in
| addition to the HTML canvas API.
| Feathercrown wrote:
| I've been waiting for this for a long time. Previous attempts to
| do similar things required installing Node-Gyp, which was a
| nightmare.
| promptdaddy wrote:
| Could this be consumed by Konva js for SSR ?
| lavrton wrote:
| Yes, it may require some monkey-patching of Konva right now.
| But I was able to do that. Drop GitHub issue if you are
| interested to discuss it.
| promptdaddy wrote:
| Thanks for the response. Would you suggest this lib for Konva
| ?
| h1fra wrote:
| 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?
| epcoa wrote:
| There isn't really anything commonly "native" as powerful as
| skia for 2D drawing and a big part of skia is using the native
| graphics effectively, this is why it exists in the first place
| for browser engines. Besides having one target API is a
| benefit.
| 1propionyl wrote:
| > There isn't really anything commonly "native" as powerful
| as skia for 2D drawing
|
| Cairo?
| james-bcn wrote:
| 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.
| mvonballmo wrote:
| 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.
| TheMiddleMan wrote:
| Yes, I'm doing exactly this with
| https://www.npmjs.com/package/jest-image-snapshot
| adrianh wrote:
| 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.
| rafaelmn wrote:
| Is Canvas really suitable for PDFs ? Afaik it's immediate
| mode bitmap graphics - so PDFs would just be embedded bitmaps
| ?
| adrianh wrote:
| 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).
| rafaelmn wrote:
| Ah nice didn't know it had a PDF backend - that sounds
| perfect for this use case.
| qwertox wrote:
| 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.
| afavour wrote:
| 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.
| colordrops wrote:
| Seems you could compile desktop apps to Web Assembly and
| distribute them without using some monstrosity like Electron.
| jeffbee wrote:
| I'd be surprised if you could point out a platform that has
| better APIs for drawing 2D graphics than Canvas offers. Skia
| outperforms Direct2D by a little bit and outperforms Cairo by a
| lot. It is optimized to a high degree and has GPU-accelerated
| backends.
| TheRealPomax wrote:
| Super excited to see this, it'll make writing web-compatible
| graphics that can also run standalone so much nicer (and without
| needing a compile things from source using a second scripting
| language to generate the code needed to compile the library for
| the first scripting language).
|
| It'll also be interesting to see how well this slots into things
| like VS Code for live-rendering canvas code (or code that has a
| translation layer for running on a web canvas)
| jahewson wrote:
| 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
| TheRealPomax wrote:
| 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.
| steelbrain wrote:
| > 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...
| jkrubin wrote:
| Anyone know what the difference between this and `@napi-
| rs/canvas` is?
|
| They seem similar?
| zazaulola wrote:
| How is it different from jimp?
|
| https://jimp-dev.github.io/jimp/
|
| Maybe there are some killer features?
| skrebbel wrote:
| 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.
| Matheus28 wrote:
| 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.
| fredrikjacobson wrote:
| Would this work together with something like react-three-fiber to
| render 3D scenes on the server?
| tantalor wrote:
| 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?
| kevingadd wrote:
| 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.
| rikroots wrote:
| 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
| brabel wrote:
| > 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/
| resoluteteeth wrote:
| > Does it depend on Skia?
|
| This one
| soegaard wrote:
| Are there plans for a C API?
|
| The missing C API for Skia is most likely why Cairo is still
| alive.
| silvajoao wrote:
| https://windowjs.org is a very similar concept -- it wraps Skia
| and exposes it as the Canvas API, but also embeds v8 for a very
| small runtime instead of using Node.
|
| It was my first open-source project, released about 3 years ago.
|
| I had plans to also expose WebGL, audio, etc and make it a viable
| platform for Javascript-based games on desktop.
|
| Life and other projects happened instead, and development was
| discontinued. Happy to see this project also making Canvas
| accessible outside the browser!
___________________________________________________________________
(page generated 2024-12-03 23:00 UTC)