4 ms·

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 br

by derefr 2y ago

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 2y ago
Automattic created node-canvas a long time ago which was based around Cairo.
- mrieck 2y ago
  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 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 2y ago
  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.
- chearon 2y ago
  Automattic acquired LearnBoost who employed TJ Holowaychuk, the original creator of node-canvas (and also Express and tons else). Automattic has not been involved in any way since at least 2017 when I joined node-canvas.
pavlov 2y ago
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 2y ago
  I'd love to learn more about how your 2 day implementation did fillText (incl full unicode rendering, proper text shaping etc)
  - pavlov 2y ago
    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_2DContext.m#L1261 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.

by derefr 2y ago

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

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

mrieck 2y ago
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 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 2y ago
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.
chearon 2y ago
Automattic acquired LearnBoost who employed TJ Holowaychuk, the original creator of node-canvas (and also Express and tons else). Automattic has not been involved in any way since at least 2017 when I joined node-canvas.

pavlov 2y ago

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 2y ago
I'd love to learn more about how your 2 day implementation did fillText (incl full unicode rendering, proper text shaping etc)
- pavlov 2y ago
  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_2DContext.m#L1261 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.