Are there any HTML5 UI frameworks that render to canvas instead of using HTML elements?

Question

I realize that some people think it is crazy to re-implement all the UI functionality of HTML in a canvas-based framework (and there are some stackoverflow questions that suggest this), but is anyone actually working on a library like this?

To clarify, the library would render all UI elements like edit boxes, labels, buttons, combo boxes, list views, etc. on the canvas directly. There would be no HTML or CSS.

Rhenium

This is crazy stuff indeed. It has to re-implement everything even beyond the controls themselves: text entry, text selection, etc. – Sniper

Not so crazy anymore, eh? :-) zebkit.com – Rhenium

Answer 1

I stumbled upon this idea today. Found the library Zebra. Haven't tried it out yet.

https://zebkit.org/

For web apps I think this makes perfect sense. HTML/CSS is just not good enough to create stable apps easily. The DOM and layouts are just too quirky and the performance too low.

What we need is something like Silverlight but without the plugin. Stable components and a great framework.

Canvas apps could be made just as accessible as html web apps. Probably more so even.

Perhaps WebGL is even better, its performance is definitely better than Canvas if done properly.

Hyperbole

YES! THIS! Zebkit looks amazing! Going to try it out for a project I'm working on. Thanks for posting! – Rhenium

Answer 2

Thunderhead was a mozilla experiment built along with bespin (now skywriter).

From the project description:

Thunderhead is a Mozilla Labs experiment to explore a JavaScript-based GUI toolkit that works with DOM elements and canvas to render components.

The problem is accessibility, canvas just isn't.

Hacksaw

Thinking about it more, I think the size of the .js files to handle all of this would get out of control too. It would be like downloading the whole browser on every page unless it was properly cached. – Rhenium

If packaged in a hybrid mobile app the download part wouldn't be a problem. We would get rid of most of the ridiculous browser differences. And we could stop using HTML/CSS for making apps. Lets finally face it. HTML/CSS was made for creating semantic documents, not apps. – Hyperbole

@Rhenium loading the browser on every page? That's definitely not recommended for a modern web "app". :) – Kierkegaardian

Answer 3

I've just reviewed zebkit.com today. Amazing and absolutely not crazy, rather essential. Try running most DOM node trees on a mobile device and you will soon know this is true. Then in contrast run the Zebkit kitchen sink demo and be shocked. You might have to reconsider your projects approach.

Coming from Java to HTML5 I definitely see some nice OOP at play in the Zebkit API, it is needed to provide the simple canvas some powerful structure. Also I really like the JSON support, it acts much like a CSS format for the canvas. Using JSON this way fits well into the Web Component mindset and the practicality of HTML partials. There are a lot of goodies in this API.

In the end all ways of producing graphics for the Web render pixels anyways. Maybe we have just added to many abstractions between the logic we what to produce and the end screen to realize this fact. With Zebkit it feels like your almost working at the native level, plus it adds in all the graces of Javascript and JSON, sweet indeed. Plus your free to mix and match in DOM as desired.

Cycloplegia

Answer 4

Now there is Flutter's CanvasKit renderer. Google docs is moving to Canvas.

Parachronism