Question

I’m looking for a straight forward description of how to use a canvas element sort of like a text area.

I have seen projects such as Ace. Just wondering how to go about writing to the area as if it where a textarea. Just plain text, nothing fancy.

Thanks in advance.

Answer 1

Ace used to be Mozilla Skywriter, which used to be Mozilla Bespin.

The code for Bespin is actually pretty simple to understand if you are willing to dig through it and make your own based on it, but it is sort of a fool’s errand. The Canvas spec actually advises specifically against this:

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.
This is a huge amount of work, and
authors are most strongly encouraged
to avoid doing any of it by instead
using the input element, the textarea
element, or the contenteditable
attribute.