Summary
This chapter covers event-driven GUI programming for an interactive canvas, demonstrating freehand drawing, text editing, image integration, and basic layer management.

General domain of usage
Collaborative whiteboards

A collaborative whiteboard is a digital canvas where multiple users can interact in real time, making it ideal for brainstorming, teaching, or planning. The core features of such a whiteboard include **freehand drawing**, which allows you to sketch ideas or annotate visually; **adding and editing text**, so that notes or labels can be placed anywhere on the canvas; **inserting images**, enabling you to bring in reference materials or diagrams; and **basic layer management**, which helps organize and separate different types of content like drawings, text, and images. These features together create a flexible and organized workspace that adapts to a variety of collaborative tasks.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHN0eWxlPgogICAgICBib2R5IHsKICAgICAgICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgICAgICAgbWFyZ2luOiAwOwogICAgICAgIHBhZGRpbmc6IDA7CiAgICAgIH0KICAgICAgI3Rvb2xiYXIgewogICAgICAgIHBhZGRpbmc6IDEwcHg7CiAgICAgICAgYmFja2dyb3VuZDogI2YwZjBmMDsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgIGdhcDogOHB4OwogICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgIH0KICAgICAgI2NvbnRhaW5lciB7CiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2NjYzsKICAgICAgICBtYXJnaW46IDEwcHg7CiAgICAgICAgYmFja2dyb3VuZDogI2ZmZjsKICAgICAgfQogICAgICAuYWN0aXZlIHsKICAgICAgICBiYWNrZ3JvdW5kOiAjZDBlYWZmOwogICAgICB9CiAgICAgIGlucHV0W3R5cGU9ImZpbGUiXSB7CiAgICAgICAgZGlzcGxheTogbm9uZTsKICAgICAgfQogICAgICAjc3RhZ2UtcGFyZW50IHsKICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0idG9vbGJhciI+CiAgICAgIDxidXR0b24gaWQ9ImRyYXctYnRuIiBjbGFzcz0iYWN0aXZlIj5EcmF3PC9idXR0b24+CiAgICAgIDxidXR0b24gaWQ9InRleHQtYnRuIj5UZXh0PC9idXR0b24+CiAgICAgIDxidXR0b24gaWQ9ImltYWdlLWJ0biI+SW1hZ2U8L2J1dHRvbj4KICAgICAgPGJ1dHRvbiBpZD0ibW92ZS1idG4iPk1vdmU8L2J1dHRvbj4KICAgICAgPGlucHV0IHR5cGU9ImZpbGUiIGlkPSJpbWFnZS1pbnB1dCIgYWNjZXB0PSJpbWFnZS8qIiAvPgogICAgPC9kaXY+CiAgICA8ZGl2IGlkPSJzdGFnZS1wYXJlbnQiPgogICAgICA8ZGl2IGlkPSJjb250YWluZXIiPjwvZGl2PgogICAgPC9kaXY+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9rb252YUA5LjIuMC9rb252YS5taW4uanMiPjwvc2NyaXB0PgogICAgPHNjcmlwdCBzcmM9InNjcmlwdC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Y29uc3Qgd2lkdGggPSA5MDA7CmNvbnN0IGhlaWdodCA9IDYwMDsKCmNvbnN0IHN0YWdlID0gbmV3IEtvbnZhLlN0YWdlKHsKICBjb250YWluZXI6ICJjb250YWluZXIiLAogIHdpZHRoLAogIGhlaWdodAp9KTsKCi8vIEJhY2tncm91bmQgbGF5ZXIgKHdoaXRlIGJhY2tncm91bmQpCmNvbnN0IGJhY2tncm91bmRMYXllciA9IG5ldyBLb252YS5MYXllcigpOwpjb25zdCBiZ1JlY3QgPSBuZXcgS29udmEuUmVjdCh7CiAgeDogMCwKICB5OiAwLAogIHdpZHRoLAogIGhlaWdodCwKICBmaWxsOiAid2hpdGUiLAogIGxpc3RlbmluZzogZmFsc2UKfSk7CmJhY2tncm91bmRMYXllci5hZGQoYmdSZWN0KTsKc3RhZ2UuYWRkKGJhY2tncm91bmRMYXllcik7CgovLyBDb250ZW50IGxheWVycwpjb25zdCBkcmF3aW5nTGF5ZXIgPSBuZXcgS29udmEuTGF5ZXIoKTsKY29uc3QgdGV4dExheWVyID0gbmV3IEtvbnZhLkxheWVyKCk7CmNvbnN0IGltYWdlTGF5ZXIgPSBuZXcgS29udmEuTGF5ZXIoKTsKCnN0YWdlLmFkZChpbWFnZUxheWVyKTsKc3RhZ2UuYWRkKGRyYXdpbmdMYXllcik7CnN0YWdlLmFkZCh0ZXh0TGF5ZXIpOwoKLy8gTW9kZSBtYW5hZ2VtZW50CmxldCBtb2RlID0gImRyYXciOwpmdW5jdGlvbiBzZXRNb2RlKG5ld01vZGUpIHsKICBtb2RlID0gbmV3TW9kZTsKICBkb2N1bWVudAogICAgLnF1ZXJ5U2VsZWN0b3JBbGwoIiN0b29sYmFyIGJ1dHRvbiIpCiAgICAuZm9yRWFjaCgoYnRuKSA9PiBidG4uY2xhc3NMaXN0LnJlbW92ZSgiYWN0aXZlIikpOwogIGlmIChtb2RlID09PSAiZHJhdyIpCiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiZHJhdy1idG4iKS5jbGFzc0xpc3QuYWRkKCJhY3RpdmUiKTsKICBpZiAobW9kZSA9PT0gInRleHQiKQogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoInRleHQtYnRuIikuY2xhc3NMaXN0LmFkZCgiYWN0aXZlIik7CiAgaWYgKG1vZGUgPT09ICJpbWFnZSIpCiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiaW1hZ2UtYnRuIikuY2xhc3NMaXN0LmFkZCgiYWN0aXZlIik7CiAgaWYgKG1vZGUgPT09ICJtb3ZlIikKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJtb3ZlLWJ0biIpLmNsYXNzTGlzdC5hZGQoImFjdGl2ZSIpOwp9Cgpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiZHJhdy1idG4iKS5vbmNsaWNrID0gKCkgPT4gc2V0TW9kZSgiZHJhdyIpOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgidGV4dC1idG4iKS5vbmNsaWNrID0gKCkgPT4gc2V0TW9kZSgidGV4dCIpOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiaW1hZ2UtYnRuIikub25jbGljayA9ICgpID0+IHsKICBzZXRNb2RlKCJpbWFnZSIpOwogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJpbWFnZS1pbnB1dCIpLmNsaWNrKCk7Cn07CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJtb3ZlLWJ0biIpLm9uY2xpY2sgPSAoKSA9PiBzZXRNb2RlKCJtb3ZlIik7CgovLyBGcmVlaGFuZCBkcmF3aW5nCmxldCBpc0RyYXdpbmcgPSBmYWxzZTsKbGV0IGN1cnJlbnRMaW5lOwoKc3RhZ2Uub24oIm1vdXNlZG93biB0b3VjaHN0YXJ0IiwgKCkgPT4gewogIGlmIChtb2RlICE9PSAiZHJhdyIpIHJldHVybjsKICBpc0RyYXdpbmcgPSB0cnVlOwogIGNvbnN0IHBvcyA9IHN0YWdlLmdldFBvaW50ZXJQb3NpdGlvbigpOwogIGN1cnJlbnRMaW5lID0gbmV3IEtvbnZhLkxpbmUoewogICAgc3Ryb2tlOiAiIzFkNzJiOCIsCiAgICBzdHJva2VXaWR0aDogMywKICAgIHBvaW50czogW3Bvcy54LCBwb3MueV0sCiAgICBsaW5lQ2FwOiAicm91bmQiLAogICAgbGluZUpvaW46ICJyb3VuZCIKICB9KTsKICBkcmF3aW5nTGF5ZXIuYWRkKGN1cnJlbnRMaW5lKTsKfSk7CgpzdGFnZS5vbigibW91c2Vtb3ZlIHRvdWNobW92ZSIsICgpID0+IHsKICBpZiAoIWlzRHJhd2luZyB8fCBtb2RlICE9PSAiZHJhdyIpIHJldHVybjsKICBjb25zdCBwb3MgPSBzdGFnZS5nZXRQb2ludGVyUG9zaXRpb24oKTsKICBjdXJyZW50TGluZS5wb2ludHMoY3VycmVudExpbmUucG9pbnRzKCkuY29uY2F0KFtwb3MueCwgcG9zLnldKSk7CiAgZHJhd2luZ0xheWVyLmJhdGNoRHJhdygpOwp9KTsKCnN0YWdlLm9uKCJtb3VzZXVwIHRvdWNoZW5kIiwgKCkgPT4gewogIGlzRHJhd2luZyA9IGZhbHNlOwp9KTsKCi8vIEFkZGluZyB0ZXh0CnN0YWdlLm9uKCJjbGljayB0YXAiLCBmdW5jdGlvbiAoZSkgewogIGlmIChtb2RlICE9PSAidGV4dCIpIHJldHVybjsKICBpZiAoZS50YXJnZXQgIT09IHN0YWdlKSByZXR1cm47CgogIGNvbnN0IHBvcyA9IHN0YWdlLmdldFBvaW50ZXJQb3NpdGlvbigpOwogIGNvbnN0IHRleHQgPSBuZXcgS29udmEuVGV4dCh7CiAgICB0ZXh0OiAiRG91YmxlLWNsaWNrIHRvIGVkaXQiLAogICAgeDogcG9zLngsCiAgICB5OiBwb3MueSwKICAgIGZvbnRTaXplOiAyNCwKICAgIGRyYWdnYWJsZTogdHJ1ZSwKICAgIGZpbGw6ICIjMjIyIiwKICAgIGZvbnRGYW1pbHk6ICJBcmlhbCIKICB9KTsKCiAgdGV4dExheWVyLmFkZCh0ZXh0KTsKICB0ZXh0TGF5ZXIuZHJhdygpOwoKICB0ZXh0Lm9uKCJkYmxjbGljayBkYmx0YXAiLCAoKSA9PiB7CiAgICBjb25zdCB0ZXh0UG9zID0gdGV4dC5hYnNvbHV0ZVBvc2l0aW9uKCk7CiAgICBjb25zdCBhcmVhUG9zID0gewogICAgICB4OiBzdGFnZS5jb250YWluZXIoKS5vZmZzZXRMZWZ0ICsgdGV4dFBvcy54LAogICAgICB5OiBzdGFnZS5jb250YWluZXIoKS5vZmZzZXRUb3AgKyB0ZXh0UG9zLnkKICAgIH07CgogICAgY29uc3QgdGV4dGFyZWEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJ0ZXh0YXJlYSIpOwogICAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZCh0ZXh0YXJlYSk7CiAgICB0ZXh0YXJlYS52YWx1ZSA9IHRleHQudGV4dCgpOwogICAgdGV4dGFyZWEuc3R5bGUucG9zaXRpb24gPSAiYWJzb2x1dGUiOwogICAgdGV4dGFyZWEuc3R5bGUubGVmdCA9IGFyZWFQb3MueCArICJweCI7CiAgICB0ZXh0YXJlYS5zdHlsZS50b3AgPSBhcmVhUG9zLnkgKyAicHgiOwogICAgdGV4dGFyZWEuc3R5bGUud2lkdGggPSB0ZXh0LndpZHRoKCkgKyAyMCArICJweCI7CiAgICB0ZXh0YXJlYS5zdHlsZS5mb250U2l6ZSA9IHRleHQuZm9udFNpemUoKSArICJweCI7CiAgICB0ZXh0YXJlYS5zdHlsZS5mb250RmFtaWx5ID0gdGV4dC5mb250RmFtaWx5KCk7CiAgICB0ZXh0YXJlYS5zdHlsZS5ib3JkZXIgPSAiMXB4IHNvbGlkICMxZDcyYjgiOwogICAgdGV4dGFyZWEuc3R5bGUuYmFja2dyb3VuZCA9ICJ3aGl0ZSI7CiAgICB0ZXh0YXJlYS5mb2N1cygpOwoKICAgIHRleHRhcmVhLmFkZEV2ZW50TGlzdGVuZXIoImtleWRvd24iLCBmdW5jdGlvbiAoZSkgewogICAgICBpZiAoZS5rZXkgPT09ICJFbnRlciIpIHsKICAgICAgICB0ZXh0LnRleHQodGV4dGFyZWEudmFsdWUpOwogICAgICAgIHRleHRhcmVhLnJlbW92ZSgpOwogICAgICAgIHRleHRMYXllci5kcmF3KCk7CiAgICAgIH0KICAgIH0pOwoKICAgIHRleHRhcmVhLmFkZEV2ZW50TGlzdGVuZXIoImJsdXIiLCBmdW5jdGlvbiAoKSB7CiAgICAgIHRleHQudGV4dCh0ZXh0YXJlYS52YWx1ZSk7CiAgICAgIHRleHRhcmVhLnJlbW92ZSgpOwogICAgICB0ZXh0TGF5ZXIuZHJhdygpOwogICAgfSk7CiAgfSk7CgogIGFkZFRyYW5zZm9ybWVyKHRleHQpOwp9KTsKCi8vIEluc2VydGluZyBsb2NhbCBpbWFnZXMKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImltYWdlLWlucHV0IikuYWRkRXZlbnRMaXN0ZW5lcigiY2hhbmdlIiwgKGUpID0+IHsKICBpZiAoIWUudGFyZ2V0LmZpbGVzLmxlbmd0aCkgcmV0dXJuOwogIGNvbnN0IGZpbGUgPSBlLnRhcmdldC5maWxlc1swXTsKICBjb25zdCByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpOwoKICByZWFkZXIub25sb2FkID0gZnVuY3Rpb24gKGV2dCkgewogICAgY29uc3QgaW1nT2JqID0gbmV3IEltYWdlKCk7CiAgICBpbWdPYmouc3JjID0gZXZ0LnRhcmdldC5yZXN1bHQ7CgogICAgaW1nT2JqLm9ubG9hZCA9IGZ1bmN0aW9uICgpIHsKICAgICAgY29uc3Qga29udmFJbWcgPSBuZXcgS29udmEuSW1hZ2UoewogICAgICAgIGltYWdlOiBpbWdPYmosCiAgICAgICAgeDogNTAsCiAgICAgICAgeTogNTAsCiAgICAgICAgd2lkdGg6IGltZ09iai53aWR0aCA+IDIwMCA/IDIwMCA6IGltZ09iai53aWR0aCwKICAgICAgICBoZWlnaHQ6IGltZ09iai5oZWlnaHQgPiAyMDAgPyAyMDAgOiBpbWdPYmouaGVpZ2h0LAogICAgICAgIGRyYWdnYWJsZTogdHJ1ZQogICAgICB9KTsKCiAgICAgIGltYWdlTGF5ZXIuYWRkKGtvbnZhSW1nKTsKICAgICAgaW1hZ2VMYXllci5kcmF3KCk7CiAgICAgIGFkZFRyYW5zZm9ybWVyKGtvbnZhSW1nKTsKICAgIH07CiAgfTsKCiAgcmVhZGVyLnJlYWRBc0RhdGFVUkwoZmlsZSk7CiAgc2V0TW9kZSgibW92ZSIpOwp9KTsKCi8vIE1vdmUgLyBUcmFuc2Zvcm0KY29uc3QgdHJhbnNmb3JtZXIgPSBuZXcgS29udmEuVHJhbnNmb3JtZXIoewogIGVuYWJsZWRBbmNob3JzOiBbInRvcC1sZWZ0IiwgInRvcC1yaWdodCIsICJib3R0b20tbGVmdCIsICJib3R0b20tcmlnaHQiXSwKICByb3RhdGVFbmFibGVkOiB0cnVlCn0pOwpzdGFnZS5hZGQodHJhbnNmb3JtZXIpOwoKZnVuY3Rpb24gYWRkVHJhbnNmb3JtZXIobm9kZSkgewogIG5vZGUub24oIm1vdXNlZG93biIsICgpID0+IHsKICAgIGlmIChtb2RlICE9PSAibW92ZSIpIHJldHVybjsKICAgIHRyYW5zZm9ybWVyLm5vZGVzKFtub2RlXSk7CiAgfSk7Cn0KCnN0YWdlLm9uKCJjbGljayB0YXAiLCBmdW5jdGlvbiAoZSkgewogIGlmIChtb2RlICE9PSAibW92ZSIpIHJldHVybjsKICBpZiAoZS50YXJnZXQgPT09IHN0YWdlKSB7CiAgICB0cmFuc2Zvcm1lci5ub2RlcyhbXSk7CiAgICByZXR1cm47CiAgfQogIGlmIChlLnRhcmdldCBpbnN0YW5jZW9mIEtvbnZhLlRleHQgfHwgZS50YXJnZXQgaW5zdGFuY2VvZiBLb252YS5JbWFnZSkgewogICAgdHJhbnNmb3JtZXIubm9kZXMoW2UudGFyZ2V0XSk7CiAgfQp9KTs=

In a collaborative whiteboard, which feature helps users organize different types of content (drawings, text, images) efficiently?

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.

Collaborative Whiteboard Prototype Project

Collaborative Whiteboard Prototype Project