The Zebra project has created a full component set which is rendered into a HTML5 canvas element. Here is a screenshot of the component sampler. I haven’t used the framework, but it should give you an idea of how well the different browsers can render UI components.
Rotate the components and check the quality of line rendering (anti-aliasing), which is very different depending on the browser you use. Here’s some more information regarding that problem:
- HTML5 Canvas avoid any subpixel rendering
- Poor anti-aliasing of text drawn on Canvas
- Subpixel anti-aliased text on HTML5’s canvas element
Another project is Makepad, a webGL worker-based library and live code editor. Every visible part of the UI is rendered in WebGL, including all text on screen, rendered through the integrated text rendering engine.
It is still early phase for the project, but you can try out a live demo here. Makepad is open source, the Git repo can be found at github.com/makepad/makepad.github.io.