16 ms·
Skia Canvas: Browserless implementation of the HTML Canvas drawing API for node
- brabel 2y agoIs this like a wrapper for the Rust crate? https://rust-skia.github.io/doc/skia_safe/canvas/struct.Canvas.html https://rust-skia.github.io/doc/skia_safe/canvas/struct.Canv...
- modeless 2y agoHuh, 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 2y agoThat'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 2y agoSkia 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 2y agoI 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.
- MortyWaves 2y agoKind 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 2y agoIt's the "html canvas drawing api" that "browserless" refers to
- sroussey 2y agoNode is a browserless JS engine. I don’t see why saying browserless is weird.
- MortyWaves 2y agoI don’t think anyone ever thought Node was a browser thing though
- jasonjmcghee 2y agoThinking 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 2y agoIs not only that, Node was born from the V8 implementation in Google Chrome, not the other way around.
- MortyWaves 2y agoSo that means everyone pretends node is a browser thing? Why stop there? Why not call every JS library that happens to run in Node “browserless”?
- 2y ago
- Feathercrown 2y agoI've been waiting for this for a long time. Previous attempts to do similar things required installing Node-Gyp, which was a nightmare.
- promptdaddy 2y agoCould this be consumed by Konva js for SSR ?
- lavrton 2y agoYes, 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 2y agoThanks for the response. Would you suggest this lib for Konva ?
- h1fra 2y agoOut 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?
- james-bcn 2y agoYes 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.
- epcoa 2y agoThere 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 2y ago> There isn’t really anything commonly “native” as powerful as skia for 2D drawing Cairo?
- epcoa 2y agoI love Cairo, but it’s just not in the same feature or performance ballpark as skia. There’s a reason even Firefox adopted skia. Skia is like the V8 of 2D drawing libraries, just a ton of continual investment into optimization. I used to work on cairo and pixman, it’s great, very straightforward but not finely tuned for performance on modern hardware.
- pjmlp 2y agoDirect2D, CoreGraphics,...
- epcoa 2y agoIn addition to the portability issue, CoreGraphics does not compete directly with Skia or Direct2D for that matter (it’s mostly CPU based). If you combine it with CoreAnimation you get something of a quasi superset. Direct2D is +/-, but it also doesn’t have some higher level features like PDF and SVG backends, and it doesn’t have the software rendering capabilities of skia by design. Of course there are 2D drawing libraries on the major platforms (and CoreGraphics and Direct2D are very different, there’s also GDI+), but it was a weird question to start: what’s the use of a portable library. But furthermore, skia is not just a portability wrapper.
- TheRealPomax 2y agoSuper 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 2y agoSkia 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 https://www.npmjs.com/package/canvaskit-wasm
- TheRealPomax 2y agoNote 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 2y ago> 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-webassembly https://nodejs.org/en/learn/getting-started/nodejs-with-weba...
- maxloh 2y agoThe more accurate way to say that is: V8 is also a WASM runtime.
- jkrubin 2y agoAnyone know what the difference between this and `@napi-rs/canvas` is? They seem similar?
- zazaulola 2y agoHow is it different from jimp? https://jimp-dev.github.io/jimp/ https://jimp-dev.github.io/jimp/ Maybe there are some killer features?
- skrebbel 2y agoIt 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 2y agoThe 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 2y agoWould this work together with something like react-three-fiber to render 3D scenes on the server?
- tantalor 2y agoWhat 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 2y agoIn 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 2y agoReading 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 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 https://skia-canvas.org/api/context#textdecoration [4] - https://skia-canvas.org/api/context#createprojection https://skia-canvas.org/api/context#createprojection [5] - https://skia-canvas.org/api/path2d https://skia-canvas.org/api/path2d
- brabel 2y ago> 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/ https://skia.org/
- resoluteteeth 2y ago> Does it depend on Skia? This one
- soegaard 2y agoAre there plans for a C API? The missing C API for Skia is most likely why Cairo is still alive.
- hwc 2y agoI did a little work on a C API for Skia a long time ago. We didn't have a good use case at the time, so the project was dropped.
- loic-sharma 2y agoImpeller - Flutter’s rendering library that replaces Skia on iOS and Android - is working on a C API: https://github.com/flutter/engine/blob/main/impeller/toolkit/interop/README.md https://github.com/flutter/engine/blob/main/impeller/toolkit...
- silvajoao 2y agohttps://windowjs.org 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!
- njtransit 2y agoThat’s pretty cool! But v8 alone kind of sucks unless you specifically want isolation. Sometimes you just want to make a network request, you know?
- xnorswap 2y ago> Sometimes you just want to make a network request In a drawing tool / library? That's just asking for trouble. By spec, SVG allows for XXE shenanigans. I'd rather not worry that any image file I process might exfiltrate my data.
- silvajoao 2y agoThat makes total sense in many applications, including games. The idea was to have TCP sockets and Websockets to enable that. Basically, have the same APIs you're familiar with in a Browser, but in a much smaller package that you can ship independently of the Browser. (this is very similar to Electron)
- wis 2y agoAmazing project! > but also embeds v8 for a very small runtime instead of using Node. By how much does embedding just V8 instead of using Node.js decrease the binary size? Node.js uses V8, does most of Node's binary size come from its runtime and not V8? I tried browsing the website and GitHub repo to find how many kBs or MBs typically is a Window.js binary, but didn't find an answer.
- 2y ago
- dejongh 2y agoHaving skia power in nodejs is a cool idea. Thanks!
- deleted 2y ago[deleted]
- lucasmerlin 2y agoI use it in https://malmal.io https://malmal.io for rendering the drawn tiles on my server, it works really well.
- maelito 2y agoI wonder if this would help to render MapLibre server-side. To provide map thumbnails.
- pedroth 2y agoI made something similar for node/web, not so complete, but good. It can also create windows in the OS using SDL Check the docs and examples https://github.com/pedroth/tela.js https://github.com/pedroth/tela.js
- kevlened 2y agoIf you're interested in node-compatible canvas implementations: - canvaskit-wasm from the skia project - I don't think it's gpu-accelerated: https://github.com/google/skia/tree/main/modules/canvaskit/npm_build https://github.com/google/skia/tree/main/modules/canvaskit/n... - @napi-rs/canvas - This is the fastest binding: https://github.com/Brooooooklyn/canvas?tab=readme-ov-file#performance https://github.com/Brooooooklyn/canvas?tab=readme-ov-file#pe... - node-canvas - Uses Cairo instead of Skia: https://github.com/Automattic/node-canvas https://github.com/Automattic/node-canvas
- citeguised 2y agoI'm using this currently with Deno for Advent of Code, if I need a simple window with graphics. (There's a window-example[1]) It can be added by doing "deno add npm:skia-canvas", adding "nodeModulesDir: auto" to the deno.json, and doing a "deno install --allow-scripts". [1] https://skia-canvas.org/#rendering-to-a-window https://skia-canvas.org/#rendering-to-a-window