News for hackers. Stuff that matters.
Re:Google Docs will now use canvas based rendering by recursive on Wednesday May 12, 2021 @10:01AM (#27130412)
Their own renderer has to support all of HTML and CSS. Slapping some rectangles on a raster surface has a lot less to worry about.
Re:Google Docs will now use canvas based rendering by danShumway on Wednesday May 12, 2021 @12:23PM (#27132087)
Well... sort of.

For specific apps, or parts of apps, yes. Doing less is how you make things faster, highly agreed. And sometimes canvas allows you to do that, and then your app is much faster.

The problem is that in many cases, moving to canvas eventually turns into having a UI framework that renders to canvas, which turns into a layer of abstractions that handle keyboard and mouse events for you, including stuff like hover, which means suddenly you're tracking element position on your raster surface and thinking about z-indexes and event bubbling to parent elements...

I think this is part of the reason why individual apps that start using canvas and that can genuinely cut down on complexity by doing so tend to be able to get real speed improvements, but app frameworks like Flutter tend to perform so poorly. Eventually your cross-platform GUI toolkit like Flutter ends up being just another browser engine written in WASM. And in that scenario your approach becomes strict downside.

One good example: the browser doesn't expose an accessibility engine other than the DOM. So what I see apps end up eventually doing is either writing their own accessibility engine that doesn't work with programs like JAWS, or rendering out to a hidden DOM. For something like a game, you can get away that, maybe you don't even provide an accessibility layer at all. For a web component or a chart, a lot of your rendering might be unrelated to accessibility at all. But you get away with those kind of shortcuts because it's a targeted, specific use. For a big UI toolkit, it's harder to do that, and then surprise, suddenly you have all the overhead of updating a DOM tree and the overhead of updating a canvas.

When people talk about getting raw access to the graphics layer, I think it's important to understand there's a difference between apps that are genuinely reducing complexity vs the theoretical canvas-backed "universal web framework" that people sometimes talk about as just around the corner.

Re:Google Docs will now use canvas based rendering by andrewingram on Wednesday May 12, 2021 @02:02PM (#27133291)
Are you sure you meant Figma? It's an image editor, not a framework.
Re:Google Docs will now use canvas based rendering by danShumway on Wednesday May 12, 2021 @02:17PM (#27133426)
Eh, bleh, you're completely right, I meant Flutter. Good catch.

Figma is not only not a framework, it's also not completely canvas based, or at least wasn't last time I checked.

Re:Google Docs will now use canvas based rendering by zozbot234 on Wednesday May 12, 2021 @10:14AM (#27130574)
"Slapping some rectangles on a raster surface" can also be done in HTML/CSS, with the right options (set 'overflow' content to be clipped with no reflow).
Re:Google Docs will now use canvas based rendering by dmitriid on Wednesday May 12, 2021 @10:28AM (#27130730)
No, it can't be done in HTML+CSS in a performant way.
Re:Google Docs will now use canvas based rendering by strogonoff on Wednesday May 12, 2021 @11:06AM (#27131221)
VS Code feels performant enough, with its complex functionality IMO exceeding Google Docs, and yet I don't think it is using canvas. I believe it comes down to strategic design that avoids unnecessary layout and reflow events in the UI.

That said, the UI of VS Code (the desktop app) only needs to run in Chromium. And generally Google Docs could be a different enough beast that it can’t take advantage of the same tricks—hard to say from the outside.

Re:Google Docs will now use canvas based rendering by dmitriid on Wednesday May 12, 2021 @03:13PM (#27134041)
> VS Code feels performant enough, with its complex functionality

VS Code has an entire dedicated team that only works on VS Code. They can spend resources on trying any trick in the book to make something performant. Whenever actual performance is required, well, they ditch DOM and go for canvas: https://code.visualstudio.com/blogs/2017/10/03/terminal-rend...

And while sufficiently complex, it actually displays significantly less complex information than required by a regular document that will have any number of fonts, layouts, inline images and tables, references to other documents, etc.

> I believe it comes down to strategic design that avoids unnecessary layout and reflow events in the UI.

Yup. And it's nearly impossible to do any amount of "strategic design" because if you as much as glance at a document, it will repaint and reflow: https://csstriggers.com

Re:Google Docs will now use canvas based rendering by d-yakovlev on Wednesday May 12, 2021 @11:47AM (#27131681)
some of VS Code has been canvas-based since 2017 - https://code.visualstudio.com/blogs/2017/10/03/terminal-rend...
Re:Google Docs will now use canvas based rendering by strogonoff on Wednesday May 12, 2021 @11:53AM (#27131752)
I stand corrected, seems like they’re using canvas for at least the integrated terminal and maybe (?) the editor. Makes all the more sense for Google Docs to follow suit. I’m not against apps moving entirely to canvas by the way, as long as the regular non-webapp sites don’t start doing this just because they can.
Re:Google Docs will now use canvas based rendering by Tyriar on Wednesday May 12, 2021 @01:24PM (#27132822)
The editor is all DOM based apart from the minimap. More pixels could definitely be pushed faster by re-writing it in canvas but it would be quite the undertaking when you consider accessibility, backwards compatibility, monaco extensibility, etc. with the end result just being a improved scrolling experience.
Re:Google Docs will now use canvas based rendering by mvolfik on Wednesday May 12, 2021 @12:09PM (#27131936)
but VS code still only has to support monospaced code + some popups and sidebars, not mix-and-match of font and all its variants in all complex layouts, line heights, paragraph spaces, column layouts, images including float etc etc