Using a canvas element as a textarea

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.

Answer 2

Inspecting the live demo with chrome shows they use divs and spans to achieve this. The blinking cursor is a div that seems to switch between hidden and visible on a regular basis. I would think that they just check the pressed key from the event and write it to the corresponding span for the line.