Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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).</p> <p>The HTML5 Canvas specification itself heavily advises against trying to do it. As the spec says:</p> <blockquote> <p>Authors should avoid implementing text editing controls using the canvas element. Doing so has a large number of disadvantages:</p> <ul> <li>Mouse placement of the caret has to be reimplemented.</li> <li>Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline text input).</li> <li>Scrolling of the text field has to be implemented (horizontally for long lines, vertically for multiline input).</li> <li>Native features such as copy-and-paste have to be reimplemented.</li> <li>Native features such as spell-checking have to be reimplemented.</li> <li>Native features such as drag-and-drop have to be reimplemented.</li> <li>Native features such as page-wide text search have to be reimplemented.</li> <li>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.</li> <li>Bidirectional text editing has to be reimplemented.</li> <li>For multiline text editing, line wrapping has to be implemented for all relevant languages.</li> <li>Text selection has to be reimplemented.</li> <li>Dragging of bidirectional text selections has to be reimplemented.</li> <li>Platform-native keyboard shortcuts have to be reimplemented.</li> <li>Platform-native input method editors (IMEs) have to be reimplemented.</li> <li>Undo and redo functionality has to be reimplemented.</li> <li>Accessibility features such as magnification following the caret or selection have to be reimplemented.</li> </ul> </blockquote> <p>Implementing these sorts of things in Canvas is a <em>nightmare</em>, 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.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. COI saw someone on ##javascript in freenode showcase a canvas script which emulated the Windows UI control look. It sorta worked, but it was apparently just an experiment. Personally I can't think of any reason why you would need to do that in canvas since you can do it about a bazillion times easier in HTML + CSS...
      singulars
    2. COMany of those things don't need to be reimplemented. And, for the things that do need to be reimplemented...well, that's exactly the point behind asking about 3rd party libraries: What is out there that has already been reimplemented? :) One reason this should be done in Canvas is for graphical design purposes. Another reason, maybe the developer wants a particle system to interact with the textbox in some way. I could probably think of dozens of reasons, but superimposing HTML elements on top of a canvas area just seems like an ugly hack to me, like stitching two different paradigms together.
      singulars
    3. COMany developers see re-implementing this stuff in Canvas as the thing that is the ugly hack. You're right of course, not everything can be done by superimposing HTML Elements (which typically looks ugly anyway). But we are all hoping to avoid the kind of nauseating page controls that occurred during the Flash era (that webpages have since almost entirely ditched - thankfully!) I do wish I had such a library to point you towards, but the only team that has come close are the Mozilla Bespin/Skywriter team. They actually ended up completely ditching Canvas and merging with Ace, which uses divs.
      singulars
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload