HTML5 Canvas Library for UI Widgets

Question

I've been looking for a library that can aid in the rendering and functionality of UI widgets embedded within the canvas area, such as combo boxes, check boxes, radio buttons, text areas, list boxes with scrollbars, etc, without superimposing normal HTML elements by floating them on top of the canvas area. Flex provides all this for Flash and there are many Actionscript libraries out there that create UI widget components within the Flash "canvas" (so to speak). These UI widget libraries have served the Flash community well in certain situations and this is also needed in analogous situations within HTML5 canvas.

Does anyone know where these libraries can be found?

Answer 1

There aren't any fell-featured ui widget libraries yet that I've seen, but I guarantee they will be made someday, if only because people will demand them (for good reasons or bad).

The HTML5 Canvas specification itself heavily advises against trying to do it. As the spec says:

Authors should avoid implementing text editing controls using the canvas element. Doing so has a large number of disadvantages:

• Mouse placement of the caret has to be reimplemented.
• Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline text input).
• Scrolling of the text field has to be implemented (horizontally for long lines, vertically for multiline input).
• Native features such as copy-and-paste have to be reimplemented.
• Native features such as spell-checking have to be reimplemented.
• Native features such as drag-and-drop have to be reimplemented.
• Native features such as page-wide text search have to be reimplemented.
• Native features specific to the user, for example custom text services, have to be reimplemented. This is close to impossible since each user might have different services installed, and there is an unbounded set of possible such services.
• Bidirectional text editing has to be reimplemented.
• For multiline text editing, line wrapping has to be implemented for all relevant languages.
• Text selection has to be reimplemented.
• Dragging of bidirectional text selections has to be reimplemented.
• Platform-native keyboard shortcuts have to be reimplemented.
• Platform-native input method editors (IMEs) have to be reimplemented.
• Undo and redo functionality has to be reimplemented.
• Accessibility features such as magnification following the caret or selection have to be reimplemented.

Implementing these sorts of things in Canvas is a nightmare, especially today, where the same font looks different not only per browser, but looks different between Canvas rendering the font and the Browser rendering the font.