This project demonstrates the new HTML Canvas TextMetrics APIs
under development in Chromium-based browsers, with the intention
of adding them to the
HTML Canvas specification.
The new APIs target the editing of text in canvas.
- caretPositionFromPoint
gives the locatiom in a string corresponding to a pixel length along
the string. Use it to identify where the caret is in the string,
and what the bounds of a selection range are.
- getSelectionRects
returns the rectangles that a browser would use to highlight
a range of text. Use it to draw the selection highlight.
- getActualBoundingBox
returns the bounding box for a sub-range of text within a string.
Use it if you need to know whether a point lies within a substring,
rather than the entire string.
Usage:
- Clicking within the text places a cursor. Typing here will insert
the text into the string. Click outside the text to clear the cursor.
- Dragging will select the range of text.
- Ctrl-C copies the selected text into a buffer.
- Ctrl-X cuts the selected text and puts it in the buffer.
- Ctrl-V inserts the buffer at the caret location.
- The Backspace key deletes the character before the caret, or the
selection.
Limitations
- The behavior with RTL text or, even more, mixed directions is
not well defined.
- Emoji are not supported, nor other glyhs specified with mutliple
characters.
- There is no line breaking.
- There is no undo/redo.