HTML5 canvas library for user interface widget

Question

I was looking for a library that could help with the rendering and functionality of a user interface widget embedded in a canvas area, such as combo boxes, check boxes, radio buttons, text areas, lists with scroll bars, etc., without overlaying the usual HTML elements while floating them over the canvas area. Flex provides all of this for Flash, and there are many Actionscript libraries that create the user interface widget components in a Flash canvas (so to speak). These user interface widget libraries served the Flash community well in certain situations, and it is also necessary in similar situations in the HTML5 canvas.

Does anyone know where to find these libraries?

Answer 1

Zebkit (formerly Zebra) is quite complete, although Textarea not very rich.

It is licensed under the Apache 2.0 license .

Github for this here .

Answer 2

There are no explicit libraries that I have seen so far, but I guarantee that they will be made someday, if only because people will demand them (for good reasons or badly).

The HTML5 Canvas specification alone does not advise trying to do this. As stated in the specification:

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

• You must redefine the location of the mouse in the carriage.
• The movement of the keyboard in the carriage must be redefined (possibly in different lines, for multi-line text input).
• Scrolling of the text field should be implemented (horizontally for long lines, vertically for multi-line input).
• Real functions, such as copy and paste, must be reimplemented.
• Real features, such as spell checking, must be reimplemented.
• It is necessary to repeat the performance of functions such as drag-and-drop.
• You need to rethink internal features such as text search on the page.
• User-specific native functions, such as custom text services, must be redefined. This is almost impossible, since each user can have different services installed, and there is an unlimited set of possible such services.
• Bidirectional text editing should be redefined.
• For multi-line editing of text for all relevant languages, line breaks must be performed.
• Text selection must be redefined.
• Repeated drag and drop bidirectional text options.
• You need to redefine the keyboard shortcuts on the platform.
• You must override platform-based method editors (IMEs).
• The undo and redo function must be redefined.
• You must override accessibility features, such as magnification after a carriage or selection.

Implementing such things in Canvas is a nightmare, especially today, when the same font looks not only for the browser, but also differs from Canvas in the rendering of the font and the browser that displays the font.