CODEWITHSUNDEEP
htmluser-interfaceframeworkscanvas
MindJuice
MindJuice

Reputation: 4291

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

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.

Upvotes: 14

Views: 9555

Answers (4)

secretshardul
secretshardul

Reputation: 1873

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

Upvotes: 1

oldwizard
oldwizard

Reputation: 5062

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.

Upvotes: 11

user3525949
user3525949

Reputation: 189

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.

Upvotes: 3

Jason Harwig
Jason Harwig

Reputation: 45591

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.

Upvotes: 3

Related Questions