5 ms·

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?

by h1fra 2y ago

james-bcn 2y ago
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.
epcoa 2y ago
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 2y ago
  > There isn’t really anything commonly “native” as powerful as skia for 2D drawing Cairo?
  - epcoa 2y ago
    I 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 ago
  Direct2D, CoreGraphics,...
  - epcoa 2y ago
    In 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.
    - pjmlp 2y ago
      Well, the whole point is the native 2D library on the OSes that Skia depends on, APIs that take direct advantage of OS 2D and 3D OS APIs, and not some third party.
      - epcoa 2y ago
        Are Vulkan and OpenGL OS “native” or 3rd party? I think this is sort of a semantics hairsplitting argument that isn’t terribly useful. Skia is useful because it provides a powerful, performance oriented common target 2D drawing library, and it is more than a lowest common denominator wrapper.
        pjmlp 2y ago
        They are on the platforms that offer them as OS APIs, Skia isn't, it is a wrapper on top. It could be Qt, SDL, SFML, or anything else with similar goals.
mvonballmo 2y ago
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 2y ago
  Yes, I'm doing exactly this with https://www.npmjs.com/package/jest-image-snapshot https://www.npmjs.com/package/jest-image-snapshot
adrianh 2y ago
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 2y ago
  Is Canvas really suitable for PDFs ? Afaik it's immediate mode bitmap graphics - so PDFs would just be embedded bitmaps ?
  - adrianh 2y ago
    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 2y ago
      Ah nice didn't know it had a PDF backend - that sounds perfect for this use case.
- simonsarris 2y ago
  Curious: What other libs are you using for the PDF generation?
- DanielHB 2y ago
  On a related note, I once used puppeteer and headless chrome in a docker image to generate PDF manuals from our web page documentation using the print to PDF feature of headless chrome. I am not sure if it would be viable to use for thousands of PDF generation per minute but it worked great. I wasted a lot of time trying to find a good lib for HTML->PDF and they all kinda sucked in different ways. The only downside is that the chrome PDF api doesn't have a way to generate a table of contents with page numbers.
qwertox 2y ago
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 2y ago
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 2y ago
Seems you could compile desktop apps to Web Assembly and distribute them without using some monstrosity like Electron.
jeffbee 2y ago
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.
nox101 2y ago
It's portable? What other GPU accelerated 2D rendering library is? One the one hand this is lower-level. On the other hand, I've used puppeteer as my 2D graphics library. I get Canvas 2D, and WebGL, and WebGPU, and all of HTML/CSS (so Text with effects, background images, CSS transforms, etc). I get image and video loading. I can then use the screenshot functionality to make an image of whatever I put together. It's overkill, but for my use case I don't care. It works, it's cross platform, it solves my problem.
senko 2y ago
I used it (different lib, same purpose) at a previous startup, shared web whiteboard, to save the whiteboard to pdf/image. We had a rendering engine backed by canvas, so it was easy to just redirect it to this to get the file output. (not everything was visible on the user's screen all the time so couldn't just save from the client)
vjeux 2y ago
We use it for excalidraw to generate opengraph previews of scenes when you send a link to somebody.
- DaniAkash 2y ago
  That's so interesting! So it's a great way to display og:images for canvas items

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?

by h1fra 2y ago

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?

james-bcn 2y ago

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.

epcoa 2y ago

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 2y ago
> There isn’t really anything commonly “native” as powerful as skia for 2D drawing Cairo?
- epcoa 2y ago
  I 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 ago
Direct2D, CoreGraphics,...
- epcoa 2y ago
  In 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.
  - pjmlp 2y ago
    Well, the whole point is the native 2D library on the OSes that Skia depends on, APIs that take direct advantage of OS 2D and 3D OS APIs, and not some third party.
    - epcoa 2y ago
      Are Vulkan and OpenGL OS “native” or 3rd party? I think this is sort of a semantics hairsplitting argument that isn’t terribly useful. Skia is useful because it provides a powerful, performance oriented common target 2D drawing library, and it is more than a lowest common denominator wrapper.
      - pjmlp 2y ago
        They are on the platforms that offer them as OS APIs, Skia isn't, it is a wrapper on top. It could be Qt, SDL, SFML, or anything else with similar goals.

mvonballmo 2y ago

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 2y ago
Yes, I'm doing exactly this with https://www.npmjs.com/package/jest-image-snapshot https://www.npmjs.com/package/jest-image-snapshot

adrianh 2y ago

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 2y ago
Is Canvas really suitable for PDFs ? Afaik it's immediate mode bitmap graphics - so PDFs would just be embedded bitmaps ?
- adrianh 2y ago
  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 2y ago
    Ah nice didn't know it had a PDF backend - that sounds perfect for this use case.
simonsarris 2y ago
Curious: What other libs are you using for the PDF generation?
DanielHB 2y ago
On a related note, I once used puppeteer and headless chrome in a docker image to generate PDF manuals from our web page documentation using the print to PDF feature of headless chrome. I am not sure if it would be viable to use for thousands of PDF generation per minute but it worked great. I wasted a lot of time trying to find a good lib for HTML->PDF and they all kinda sucked in different ways. The only downside is that the chrome PDF api doesn't have a way to generate a table of contents with page numbers.

qwertox 2y ago

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 2y ago

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 2y ago

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

jeffbee 2y ago

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.

nox101 2y ago

It's portable? What other GPU accelerated 2D rendering library is? One the one hand this is lower-level. On the other hand, I've used puppeteer as my 2D graphics library. I get Canvas 2D, and WebGL, and WebGPU, and all of HTML/CSS (so Text with effects, background images, CSS transforms, etc). I get image and video loading. I can then use the screenshot functionality to make an image of whatever I put together. It's overkill, but for my use case I don't care. It works, it's cross platform, it solves my problem.

senko 2y ago

I used it (different lib, same purpose) at a previous startup, shared web whiteboard, to save the whiteboard to pdf/image. We had a rendering engine backed by canvas, so it was easy to just redirect it to this to get the file output. (not everything was visible on the user's screen all the time so couldn't just save from the client)

vjeux 2y ago

We use it for excalidraw to generate opengraph previews of scenes when you send a link to somebody.

DaniAkash 2y ago
That's so interesting! So it's a great way to display og:images for canvas items