Summary  
This chapter covers techniques for adding and editing text nodes in an interactive canvas by synchronizing native HTML input elements with Konva Text objects, applying consistent styling, handling user interactions like dragging and double-click to edit, and redrawing layers to reflect updates.

General domain of usage  
Annotation and whiteboarding applications.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHN0eWxlPgogICAgICBib2R5IHsKICAgICAgICBtYXJnaW46IDIwcHg7CiAgICAgIH0KICAgICAgI2NvbnRhaW5lciB7CiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2NjYzsKICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgICAgIH0KICAgICAgLmtvbnZhanMtY29udGVudCB7CiAgICAgICAgY3Vyc29yOiBjcm9zc2hhaXI7CiAgICAgIH0KICAgICAgI3RleHRJbnB1dCB7CiAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgIGRpc3BsYXk6IG5vbmU7CiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgIzMzMzsKICAgICAgICBmb250LXNpemU6IDE4cHg7CiAgICAgICAgcGFkZGluZzogMnB4IDRweDsKICAgICAgICBiYWNrZ3JvdW5kOiAjZmZmOwogICAgICAgIHotaW5kZXg6IDEwOwogICAgICAgIG91dGxpbmU6IG5vbmU7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0iY29udGFpbmVyIj48L2Rpdj4KICAgIDxpbnB1dCBpZD0idGV4dElucHV0IiB0eXBlPSJ0ZXh0IiAvPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vdW5wa2cuY29tL2tvbnZhQDkva29udmEubWluLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgc3JjPSJzY3JpcHQuanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Y29uc3Qgd2lkdGggPSA3MDA7CmNvbnN0IGhlaWdodCA9IDQwMDsKY29uc3Qgc3RhZ2UgPSBuZXcgS29udmEuU3RhZ2UoewogIGNvbnRhaW5lcjogImNvbnRhaW5lciIsCiAgd2lkdGg6IHdpZHRoLAogIGhlaWdodDogaGVpZ2h0Cn0pOwoKY29uc3QgbGF5ZXIgPSBuZXcgS29udmEuTGF5ZXIoKTsKc3RhZ2UuYWRkKGxheWVyKTsKCi8vIElucHV0IGZvciBlZGl0aW5nL2FkZGluZyB0ZXh0CmNvbnN0IHRleHRJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJ0ZXh0SW5wdXQiKTsKbGV0IGVkaXRpbmdUZXh0ID0gbnVsbDsKCi8vIEhlbHBlcjogcG9zaXRpb24gaW5wdXQgb3ZlciB0ZXh0CmZ1bmN0aW9uIHBvc2l0aW9uSW5wdXQodGV4dE5vZGUpIHsKICBjb25zdCB0ZXh0UG9zaXRpb24gPSB0ZXh0Tm9kZS5nZXRBYnNvbHV0ZVBvc2l0aW9uKCk7CiAgY29uc3Qgc3RhZ2VCb3ggPSBzdGFnZS5jb250YWluZXIoKS5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTsKICB0ZXh0SW5wdXQuc3R5bGUubGVmdCA9IHN0YWdlQm94LmxlZnQgKyB3aW5kb3cuc2Nyb2xsWCArIHRleHRQb3NpdGlvbi54ICsgInB4IjsKICB0ZXh0SW5wdXQuc3R5bGUudG9wID0gc3RhZ2VCb3gudG9wICsgd2luZG93LnNjcm9sbFkgKyB0ZXh0UG9zaXRpb24ueSArICJweCI7CiAgdGV4dElucHV0LnN0eWxlLndpZHRoID0gdGV4dE5vZGUud2lkdGgoKSArIDIwICsgInB4IjsKICB0ZXh0SW5wdXQuc3R5bGUuZm9udFNpemUgPSB0ZXh0Tm9kZS5mb250U2l6ZSgpICsgInB4IjsKICB0ZXh0SW5wdXQuc3R5bGUuZm9udEZhbWlseSA9IHRleHROb2RlLmZvbnRGYW1pbHkoKTsKICB0ZXh0SW5wdXQuc3R5bGUuZGlzcGxheSA9ICJibG9jayI7CiAgdGV4dElucHV0LnZhbHVlID0gdGV4dE5vZGUudGV4dCgpOwogIHRleHRJbnB1dC5mb2N1cygpOwogIHRleHRJbnB1dC5zZWxlY3QoKTsKfQoKLy8gQWRkIHRleHQgb24gY2xpY2sKc3RhZ2Uub24oImNsaWNrIiwgZnVuY3Rpb24gKGUpIHsKICAvLyBQcmV2ZW50IGFkZGluZyB0ZXh0IHdoZW4gY2xpY2tpbmcgb24gZXhpc3RpbmcgdGV4dAogIGlmIChlLnRhcmdldCAhPT0gc3RhZ2UpIHJldHVybjsKCiAgY29uc3QgcG9pbnRlciA9IHN0YWdlLmdldFBvaW50ZXJQb3NpdGlvbigpOwogIGNvbnN0IHRleHQgPSBuZXcgS29udmEuVGV4dCh7CiAgICB4OiBwb2ludGVyLngsCiAgICB5OiBwb2ludGVyLnksCiAgICB0ZXh0OiAiRG91YmxlLWNsaWNrIHRvIGVkaXQiLAogICAgZm9udFNpemU6IDE4LAogICAgZm9udEZhbWlseTogIkFyaWFsIiwKICAgIGZpbGw6ICIjMmUzYjRlIiwKICAgIGRyYWdnYWJsZTogdHJ1ZQogIH0pOwoKICAvLyBEb3VibGUtY2xpY2sgdG8gZWRpdAogIHRleHQub24oImRibGNsaWNrIGRibHRhcCIsIGZ1bmN0aW9uICgpIHsKICAgIGVkaXRpbmdUZXh0ID0gdGV4dDsKICAgIHBvc2l0aW9uSW5wdXQodGV4dCk7CiAgfSk7CgogIC8vIENoYW5nZSBjdXJzb3Igb24gaG92ZXIKICB0ZXh0Lm9uKCJtb3VzZWVudGVyIiwgKCkgPT4gewogICAgc3RhZ2UuY29udGFpbmVyKCkuc3R5bGUuY3Vyc29yID0gIm1vdmUiOwogIH0pOwogIHRleHQub24oIm1vdXNlbGVhdmUiLCAoKSA9PiB7CiAgICBzdGFnZS5jb250YWluZXIoKS5zdHlsZS5jdXJzb3IgPSAiY3Jvc3NoYWlyIjsKICB9KTsKCiAgbGF5ZXIuYWRkKHRleHQpOwogIGxheWVyLmRyYXcoKTsKfSk7CgovLyBIYW5kbGUgdGV4dCBpbnB1dCBlZGl0aW5nCnRleHRJbnB1dC5hZGRFdmVudExpc3RlbmVyKCJrZXlkb3duIiwgZnVuY3Rpb24gKGUpIHsKICBpZiAoZS5rZXkgPT09ICJFbnRlciIpIHsKICAgIGlmIChlZGl0aW5nVGV4dCkgewogICAgICBlZGl0aW5nVGV4dC50ZXh0KHRleHRJbnB1dC52YWx1ZSk7CiAgICAgIGxheWVyLmRyYXcoKTsKICAgIH0KICAgIHRleHRJbnB1dC5zdHlsZS5kaXNwbGF5ID0gIm5vbmUiOwogICAgZWRpdGluZ1RleHQgPSBudWxsOwogIH0gZWxzZSBpZiAoZS5rZXkgPT09ICJFc2NhcGUiKSB7CiAgICB0ZXh0SW5wdXQuc3R5bGUuZGlzcGxheSA9ICJub25lIjsKICAgIGVkaXRpbmdUZXh0ID0gbnVsbDsKICB9Cn0pOwoKLy8gSGlkZSBpbnB1dCBvbiBibHVyCnRleHRJbnB1dC5hZGRFdmVudExpc3RlbmVyKCJibHVyIiwgZnVuY3Rpb24gKCkgewogIGlmIChlZGl0aW5nVGV4dCkgewogICAgZWRpdGluZ1RleHQudGV4dCh0ZXh0SW5wdXQudmFsdWUpOwogICAgbGF5ZXIuZHJhdygpOwogIH0KICB0ZXh0SW5wdXQuc3R5bGUuZGlzcGxheSA9ICJub25lIjsKICBlZGl0aW5nVGV4dCA9IG51bGw7Cn0pOw==

When building whiteboard and annotation features with Konva.js, effective text management is essential for user experience. Consider these tips for handling text input and styling:

- Use a native HTML input or textarea for editing, then update the Konva `Text` node when editing is complete;
- Set clear font size, family, and fill color to ensure text is readable on any background;
- Adjust the input field's position and size to match the text node for seamless editing;
- Enable dragging on text nodes so users can move annotations freely;
- Listen for double-click events to trigger editing, and handle Enter/Escape keys for saving or canceling edits;
- Always redraw the layer after text changes to reflect updates immediately.

What event is commonly used to trigger text editing in a Konva.js text annotation?

Build interactive canvas based applications using Konva JS and JavaScript. Learn to work with stages, layers, shapes, events, drawing tools, text, and images to create rich canvas experiences. Apply these skills to design whiteboard style editors, diagram tools, and other custom interactive canvas interfaces.

Learn the core ideas behind Konva.js and how its stage and layer model works. Build a foundation for drawing and manipulating shapes on the canvas with JavaScript.

Add interactivity to canvas elements by enabling dragging, resizing, and transforming shapes. Handle user events to make the canvas respond to clicks, drags, and other actions.

Create whiteboard style features using drawing tools, editable text, and images. Combine these elements to build simple diagram, annotation, or sketching interfaces.

Use grouping and layer management to organize complex scenes and prepare them for saving or export. Apply everything learned to build practical projects such as a diagram editor and a collaborative style whiteboard prototype.

Adding and Editing Text

Adding and Editing Text