Summary  
This chapter demonstrates how to implement interactive shape creation, drag-and-drop manipulation, connection via lines, and selection or deletion of elements on a canvas using event-driven programming.

General domain of usage  
Diagramming and whiteboard applications

Building a simple diagram editor is a great way to bring together the core concepts you have learned so far with Konva.js. A basic diagram editor should allow users to add shapes—such as rectangles and circles—to the canvas, drag these shapes around, and connect them with lines to represent relationships or flows. Additionally, users should be able to select shapes for editing or deletion, giving them control over the diagram's structure and appearance. These features are foundational for many whiteboard and diagramming applications, enabling users to visually organize and communicate ideas.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+CiAgICA8c3R5bGU+CiAgICAgIGJvZHkgewogICAgICAgIG1hcmdpbjogMDsKICAgICAgICBwYWRkaW5nOiAwOwogICAgICAgIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmOwogICAgICAgIGhlaWdodDo1MDBweDsKICAgICAgfQogICAgICAjdG9vbGJhciB7CiAgICAgICAgYmFja2dyb3VuZDogIzMzMzsKICAgICAgICBwYWRkaW5nOiA4cHg7CiAgICAgICAgY29sb3I6ICNmZmY7CiAgICAgIH0KICAgICAgI3Rvb2xiYXIgYnV0dG9uIHsKICAgICAgICBtYXJnaW4tcmlnaHQ6IDhweDsKICAgICAgfQogICAgICAjY29udGFpbmVyIHsKICAgICAgICB3aWR0aDogMTAwdnc7CiAgICAgICAgaGVpZ2h0OiAxMDAlCiAgICAgICAgYmFja2dyb3VuZDogI2YwZjBmMDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGlkPSJ0b29sYmFyIj4KICAgICAgPGJ1dHRvbiBpZD0iYWRkLXJlY3QiPkFkZCBSZWN0YW5nbGU8L2J1dHRvbj4KICAgICAgPGJ1dHRvbiBpZD0iYWRkLWNpcmNsZSI+QWRkIENpcmNsZTwvYnV0dG9uPgogICAgICA8YnV0dG9uIGlkPSJjb25uZWN0Ij5EcmF3IENvbm5lY3Rpb248L2J1dHRvbj4KICAgICAgPGJ1dHRvbiBpZD0iZGVsZXRlIj5EZWxldGUgU2VsZWN0ZWQ8L2J1dHRvbj4KICAgIDwvZGl2PgogICAgPGRpdiBpZD0iY29udGFpbmVyIj48L2Rpdj4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9rb252YUA5L2tvbnZhLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0ic2NyaXB0LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Y29uc3Qgd2lkdGggPSB3aW5kb3cuaW5uZXJXaWR0aDsKY29uc3QgaGVpZ2h0ID0gd2luZG93LmlubmVySGVpZ2h0IC0gNDA7IC8vIHRvb2xiYXIgaGVpZ2h0Cgpjb25zdCBzdGFnZSA9IG5ldyBLb252YS5TdGFnZSh7CiAgY29udGFpbmVyOiAiY29udGFpbmVyIiwKICB3aWR0aDogd2lkdGgsCiAgaGVpZ2h0OiBoZWlnaHQKfSk7Cgpjb25zdCBsYXllciA9IG5ldyBLb252YS5MYXllcigpOwpzdGFnZS5hZGQobGF5ZXIpOwoKbGV0IG1vZGUgPSAic2VsZWN0IjsKbGV0IHNlbGVjdGVkU2hhcGUgPSBudWxsOwpsZXQgY29ubmVjdFN0YXJ0U2hhcGUgPSBudWxsOwpsZXQgdGVtcExpbmUgPSBudWxsOwpsZXQgc2hhcGVzID0gW107CmxldCBsaW5lcyA9IFtdOwoKLy8gSGVscGVyOiBnZXQgdmlzdWFsIGNlbnRlciBvZiBhbnkgc2hhcGUKZnVuY3Rpb24gZ2V0U2hhcGVDZW50ZXIoc2hhcGUpIHsKICBjb25zdCBib3ggPSBzaGFwZS5nZXRDbGllbnRSZWN0KCk7CiAgcmV0dXJuIHsKICAgIHg6IGJveC54ICsgYm94LndpZHRoIC8gMiwKICAgIHk6IGJveC55ICsgYm94LmhlaWdodCAvIDIKICB9Owp9CgpmdW5jdGlvbiBkZXNlbGVjdFNoYXBlKCkgewogIGlmIChzZWxlY3RlZFNoYXBlKSB7CiAgICBzZWxlY3RlZFNoYXBlLnN0cm9rZShudWxsKTsKICAgIHNlbGVjdGVkU2hhcGUuc3Ryb2tlV2lkdGgoMCk7CiAgICBsYXllci5kcmF3KCk7CiAgICBzZWxlY3RlZFNoYXBlID0gbnVsbDsKICB9Cn0KCmZ1bmN0aW9uIHNlbGVjdFNoYXBlKHNoYXBlKSB7CiAgZGVzZWxlY3RTaGFwZSgpOwogIHNlbGVjdGVkU2hhcGUgPSBzaGFwZTsKICBzaGFwZS5zdHJva2UoImJsdWUiKTsKICBzaGFwZS5zdHJva2VXaWR0aCgzKTsKICBsYXllci5kcmF3KCk7Cn0KCmZ1bmN0aW9uIGNyZWF0ZVJlY3RhbmdsZSh4LCB5KSB7CiAgY29uc3QgcmVjdCA9IG5ldyBLb252YS5SZWN0KHsKICAgIHg6IHgsCiAgICB5OiB5LAogICAgd2lkdGg6IDgwLAogICAgaGVpZ2h0OiA1MCwKICAgIGZpbGw6ICJsaWdodGdyZWVuIiwKICAgIHN0cm9rZTogbnVsbCwKICAgIHN0cm9rZVdpZHRoOiAwLAogICAgZHJhZ2dhYmxlOiB0cnVlLAogICAgbmFtZTogInNoYXBlIgogIH0pOwogIGFkZFNoYXBlRXZlbnRzKHJlY3QpOwogIGxheWVyLmFkZChyZWN0KTsKICBzaGFwZXMucHVzaChyZWN0KTsKICBsYXllci5kcmF3KCk7Cn0KCmZ1bmN0aW9uIGNyZWF0ZUNpcmNsZSh4LCB5KSB7CiAgY29uc3QgY2lyY2xlID0gbmV3IEtvbnZhLkNpcmNsZSh7CiAgICB4OiB4LAogICAgeTogeSwKICAgIHJhZGl1czogMzAsCiAgICBmaWxsOiAibGlnaHRibHVlIiwKICAgIHN0cm9rZTogbnVsbCwKICAgIHN0cm9rZVdpZHRoOiAwLAogICAgZHJhZ2dhYmxlOiB0cnVlLAogICAgbmFtZTogInNoYXBlIgogIH0pOwogIGFkZFNoYXBlRXZlbnRzKGNpcmNsZSk7CiAgbGF5ZXIuYWRkKGNpcmNsZSk7CiAgc2hhcGVzLnB1c2goY2lyY2xlKTsKICBsYXllci5kcmF3KCk7Cn0KCmZ1bmN0aW9uIGFkZFNoYXBlRXZlbnRzKHNoYXBlKSB7CiAgc2hhcGUub24oIm1vdXNlZG93biIsIGZ1bmN0aW9uIChlKSB7CiAgICBpZiAobW9kZSA9PT0gImNvbm5lY3QiKSB7CiAgICAgIC8vIGZpcnN0IGNsaWNrOiBzZXQgc3RhcnQgc2hhcGUgYW5kIHRlbXAgbGluZQogICAgICBpZiAoIWNvbm5lY3RTdGFydFNoYXBlKSB7CiAgICAgICAgY29ubmVjdFN0YXJ0U2hhcGUgPSBzaGFwZTsKICAgICAgICBjb25zdCBjZW50ZXIgPSBnZXRTaGFwZUNlbnRlcihzaGFwZSk7CiAgICAgICAgdGVtcExpbmUgPSBuZXcgS29udmEuTGluZSh7CiAgICAgICAgICBwb2ludHM6IFtjZW50ZXIueCwgY2VudGVyLnksIGNlbnRlci54LCBjZW50ZXIueV0sCiAgICAgICAgICBzdHJva2U6ICJncmF5IiwKICAgICAgICAgIHN0cm9rZVdpZHRoOiAyLAogICAgICAgICAgZGFzaDogWzQsIDRdCiAgICAgICAgfSk7CiAgICAgICAgbGF5ZXIuYWRkKHRlbXBMaW5lKTsKICAgICAgfQogICAgfSBlbHNlIHsKICAgICAgc2VsZWN0U2hhcGUoc2hhcGUpOwogICAgfQogICAgZS5jYW5jZWxCdWJibGUgPSB0cnVlOwogIH0pOwoKICBzaGFwZS5vbigiZHJhZ21vdmUiLCBmdW5jdGlvbiAoKSB7CiAgICB1cGRhdGVMaW5lc0ZvclNoYXBlKHNoYXBlKTsKICB9KTsKCiAgc2hhcGUub24oIm1vdXNldXAiLCBmdW5jdGlvbiAoZSkgewogICAgaWYgKAogICAgICBtb2RlID09PSAiY29ubmVjdCIgJiYKICAgICAgY29ubmVjdFN0YXJ0U2hhcGUgJiYKICAgICAgY29ubmVjdFN0YXJ0U2hhcGUgIT09IHNoYXBlCiAgICApIHsKICAgICAgY3JlYXRlQ29ubmVjdGlvbihjb25uZWN0U3RhcnRTaGFwZSwgc2hhcGUpOwogICAgICBpZiAodGVtcExpbmUpIHsKICAgICAgICB0ZW1wTGluZS5kZXN0cm95KCk7CiAgICAgICAgdGVtcExpbmUgPSBudWxsOwogICAgICB9CiAgICAgIGNvbm5lY3RTdGFydFNoYXBlID0gbnVsbDsKICAgICAgbW9kZSA9ICJzZWxlY3QiOwogICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiY29ubmVjdCIpLmRpc2FibGVkID0gZmFsc2U7CiAgICB9CiAgfSk7Cn0KCmZ1bmN0aW9uIGNyZWF0ZUNvbm5lY3Rpb24oc2hhcGUxLCBzaGFwZTIpIHsKICBjb25zdCBjMSA9IGdldFNoYXBlQ2VudGVyKHNoYXBlMSk7CiAgY29uc3QgYzIgPSBnZXRTaGFwZUNlbnRlcihzaGFwZTIpOwoKICBjb25zdCBsaW5lID0gbmV3IEtvbnZhLkxpbmUoewogICAgcG9pbnRzOiBbYzEueCwgYzEueSwgYzIueCwgYzIueV0sCiAgICBzdHJva2U6ICJibGFjayIsCiAgICBzdHJva2VXaWR0aDogMiwKICAgIG5hbWU6ICJjb25uZWN0aW9uIiwKICAgIGxpc3RlbmluZzogZmFsc2UKICB9KTsKCiAgbGluZS5zaGFwZTEgPSBzaGFwZTE7CiAgbGluZS5zaGFwZTIgPSBzaGFwZTI7CgogIGxpbmVzLnB1c2gobGluZSk7CiAgbGF5ZXIuYWRkKGxpbmUpOwoKICAvLyBwdXQgbGluZSB1bmRlciBzaGFwZXMKICBsaW5lLm1vdmVUb0JvdHRvbSgpOwogIGxheWVyLmRyYXcoKTsKfQoKZnVuY3Rpb24gdXBkYXRlTGluZXNGb3JTaGFwZShzaGFwZSkgewogIGxpbmVzLmZvckVhY2goKGxpbmUpID0+IHsKICAgIGlmIChsaW5lLnNoYXBlMSA9PT0gc2hhcGUgfHwgbGluZS5zaGFwZTIgPT09IHNoYXBlKSB7CiAgICAgIGNvbnN0IGMxID0gZ2V0U2hhcGVDZW50ZXIobGluZS5zaGFwZTEpOwogICAgICBjb25zdCBjMiA9IGdldFNoYXBlQ2VudGVyKGxpbmUuc2hhcGUyKTsKICAgICAgbGluZS5wb2ludHMoW2MxLngsIGMxLnksIGMyLngsIGMyLnldKTsKICAgIH0KICB9KTsKICBsYXllci5iYXRjaERyYXcoKTsKfQoKLy8gVG9vbGJhciBidXR0b25zCmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJhZGQtcmVjdCIpLm9uY2xpY2sgPSBmdW5jdGlvbiAoKSB7CiAgY3JlYXRlUmVjdGFuZ2xlKDEwMCArIE1hdGgucmFuZG9tKCkgKiAzMDAsIDgwICsgTWF0aC5yYW5kb20oKSAqIDIwMCk7Cn07Cgpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiYWRkLWNpcmNsZSIpLm9uY2xpY2sgPSBmdW5jdGlvbiAoKSB7CiAgY3JlYXRlQ2lyY2xlKDEwMCArIE1hdGgucmFuZG9tKCkgKiAzMDAsIDgwICsgTWF0aC5yYW5kb20oKSAqIDIwMCk7Cn07Cgpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiY29ubmVjdCIpLm9uY2xpY2sgPSBmdW5jdGlvbiAoKSB7CiAgbW9kZSA9ICJjb25uZWN0IjsKICBjb25uZWN0U3RhcnRTaGFwZSA9IG51bGw7CiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImNvbm5lY3QiKS5kaXNhYmxlZCA9IHRydWU7Cn07Cgpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiZGVsZXRlIikub25jbGljayA9IGZ1bmN0aW9uICgpIHsKICBpZiAoc2VsZWN0ZWRTaGFwZSkgewogICAgLy8gUmVtb3ZlIGNvbm5lY3RlZCBsaW5lcwogICAgbGluZXMgPSBsaW5lcy5maWx0ZXIoKGxpbmUpID0+IHsKICAgICAgaWYgKGxpbmUuc2hhcGUxID09PSBzZWxlY3RlZFNoYXBlIHx8IGxpbmUuc2hhcGUyID09PSBzZWxlY3RlZFNoYXBlKSB7CiAgICAgICAgbGluZS5kZXN0cm95KCk7CiAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICB9CiAgICAgIHJldHVybiB0cnVlOwogICAgfSk7CgogICAgLy8gUmVtb3ZlIHNoYXBlCiAgICBzaGFwZXMgPSBzaGFwZXMuZmlsdGVyKChzKSA9PiBzICE9PSBzZWxlY3RlZFNoYXBlKTsKICAgIHNlbGVjdGVkU2hhcGUuZGVzdHJveSgpOwogICAgc2VsZWN0ZWRTaGFwZSA9IG51bGw7CiAgICBsYXllci5kcmF3KCk7CiAgfQp9OwoKLy8gRGVzZWxlY3Qgd2hlbiBjbGlja2luZyBvbiBlbXB0eSBjYW52YXMKc3RhZ2Uub24oIm1vdXNlZG93biIsIGZ1bmN0aW9uIChlKSB7CiAgaWYgKGUudGFyZ2V0ID09PSBzdGFnZSkgewogICAgZGVzZWxlY3RTaGFwZSgpOwogIH0KfSk7CgovLyBVcGRhdGUgdGVtcG9yYXJ5IGNvbm5lY3Rpb24gbGluZSB3aGlsZSBtb3ZpbmcgbW91c2UKc3RhZ2Uub24oIm1vdXNlbW92ZSIsIGZ1bmN0aW9uICgpIHsKICBpZiAobW9kZSA9PT0gImNvbm5lY3QiICYmIGNvbm5lY3RTdGFydFNoYXBlICYmIHRlbXBMaW5lKSB7CiAgICBjb25zdCBtb3VzZVBvcyA9IHN0YWdlLmdldFBvaW50ZXJQb3NpdGlvbigpOwogICAgY29uc3Qgc3RhcnRDZW50ZXIgPSBnZXRTaGFwZUNlbnRlcihjb25uZWN0U3RhcnRTaGFwZSk7CiAgICB0ZW1wTGluZS5wb2ludHMoW3N0YXJ0Q2VudGVyLngsIHN0YXJ0Q2VudGVyLnksIG1vdXNlUG9zLngsIG1vdXNlUG9zLnldKTsKICAgIGxheWVyLmJhdGNoRHJhdygpOwogIH0KfSk7CgovLyBLZXlib2FyZCBkZWxldGUKd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoImtleWRvd24iLCBmdW5jdGlvbiAoZSkgewogIGlmICgoZS5rZXkgPT09ICJEZWxldGUiIHx8IGUua2V5ID09PSAiQmFja3NwYWNlIikgJiYgc2VsZWN0ZWRTaGFwZSkgewogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImRlbGV0ZSIpLmNsaWNrKCk7CiAgfQp9KTs=

Which feature is essential for a diagram editor to allow users to visually connect shapes?

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.

Build a Simple Diagram Editor Project

Build a Simple Diagram Editor Project