Why Google Docs, Sheets, and Miro render in Canvas instead of HTML
You might want to build your WebApp in Canvas instead of HTML
Google Docs, Google Sheets, Excel for the web, Canva, and Miro all render their core interfaces in Canvas rather than HTML. The author, who built a scheduling interface in Canvas, explains the trade-offs: Canvas offers speed, control, consistency, and portability, but sacrifices accessibility, text handling, and built-in input features. He argues Canvas is the right choice when your app is a spatial workspace with complex positioning, zooming, and many visual elements, and shares practical tips like managing render scheduling, layering multiple canvases, and handling pixel density.
So don’t choose Canvas simply because it sounds fast. Choose it when your interface no longer behaves like a document and starts behaving more like a scene.
- dinkelberg
The dev tools in the browser become much more useless when you draw everything in a canvas. It's gonna be sad when everyone starts using frameworks that draw on canvases. Arguably more sad than when Webassembly came. One could probably write new dev tools for those frameworks though.
I also imagine this will be a big setback for web accessibility.
- frollogaston
People who work on web browsers have ranted that HTML/CSS isn't a very natural interface into the engine, so it's inefficient and has nasty edge cases. I know nothing about browser engines but do find CSS awkward as a user when I'm not making a plaintext website, so have been relying heavily on React for side projects.
Been thinking about doing a toy project where I try to build my own alternative to HTML/CSS that runs on top of Canvas, drawing inspiration from how Wayland is actually less abstracted than X11.
- zarzavat
Canvas is a last resort if you absolutely cannot build the thing any other way.
When you use canvas you're giving up on not just accessibility but also optimizations that the browser does for you transparently when you use the native render tree. There's no guarantee that your app will be faster in canvas, it could easily be slower. Do you really think you can beat the browser's C++ by writing code in a language that doesn't even have a native integer type? Perhaps you can, but your base assumption should be that you can't.