Summary  
This chapter explains how to handle pointer events (mousedown, mousemove, mouseup) to capture and store user-drawn paths as an array of points, then render and update freehand lines in real time on a canvas.

General domain of usage  
Drawing and annotation tools

To create a whiteboard or annotation tool, you need to capture user input in real time and translate that into visible marks on the canvas. In Konva.js, this is typically done by listening to mouse or touch events on the canvas stage. When the user presses down (using a mouse or finger), you start a new drawing path; as they move, you record the pointer positions and update the path accordingly. Once the user releases the pointer, you finish the current line or shape.

The most common approach is to use the `mousedown`, `mousemove`, and `mouseup` events (or their touch equivalents) to track when drawing should start, continue, or stop. You typically store the path as an array of points, which is then passed to a `Konva.Line` shape. This allows you to render freehand strokes that follow the user's movements smoothly.


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+CiAgICA8c3R5bGU+CiAgICAgIGJvZHkgewogICAgICAgIG1hcmdpbjogMDsKICAgICAgfQogICAgICAjY29udGFpbmVyIHsKICAgICAgICB3aWR0aDogODAwcHg7CiAgICAgICAgaGVpZ2h0OiA2MDBweDsKICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjY2NjOwogICAgICAgIG1hcmdpbjogMjBweCBhdXRvOwogICAgICAgIGRpc3BsYXk6IGJsb2NrOwogICAgICB9CiAgICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0iY29udGFpbmVyIj48L2Rpdj4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9rb252YUA5L2tvbnZhLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0ic2NyaXB0LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Y29uc3Qgd2lkdGggPSA4MDA7CmNvbnN0IGhlaWdodCA9IDYwMDsKCmNvbnN0IHN0YWdlID0gbmV3IEtvbnZhLlN0YWdlKHsKICBjb250YWluZXI6ICJjb250YWluZXIiLAogIHdpZHRoOiB3aWR0aCwKICBoZWlnaHQ6IGhlaWdodAp9KTsKCmNvbnN0IGxheWVyID0gbmV3IEtvbnZhLkxheWVyKCk7CnN0YWdlLmFkZChsYXllcik7CgpsZXQgaXNEcmF3aW5nID0gZmFsc2U7CmxldCBjdXJyZW50TGluZTsKCnN0YWdlLm9uKCJtb3VzZWRvd24gdG91Y2hzdGFydCIsICgpID0+IHsKICBpc0RyYXdpbmcgPSB0cnVlOwogIGNvbnN0IHBvcyA9IHN0YWdlLmdldFBvaW50ZXJQb3NpdGlvbigpOwogIGN1cnJlbnRMaW5lID0gbmV3IEtvbnZhLkxpbmUoewogICAgc3Ryb2tlOiAiYmxhY2siLAogICAgc3Ryb2tlV2lkdGg6IDMsCiAgICBnbG9iYWxDb21wb3NpdGVPcGVyYXRpb246ICJzb3VyY2Utb3ZlciIsCiAgICBwb2ludHM6IFtwb3MueCwgcG9zLnldLAogICAgbGluZUNhcDogInJvdW5kIiwKICAgIGxpbmVKb2luOiAicm91bmQiCiAgfSk7CiAgbGF5ZXIuYWRkKGN1cnJlbnRMaW5lKTsKfSk7CgpzdGFnZS5vbigibW91c2Vtb3ZlIHRvdWNobW92ZSIsICgpID0+IHsKICBpZiAoIWlzRHJhd2luZykgcmV0dXJuOwogIGNvbnN0IHBvcyA9IHN0YWdlLmdldFBvaW50ZXJQb3NpdGlvbigpOwogIGNvbnN0IG5ld1BvaW50cyA9IGN1cnJlbnRMaW5lLnBvaW50cygpLmNvbmNhdChbcG9zLngsIHBvcy55XSk7CiAgY3VycmVudExpbmUucG9pbnRzKG5ld1BvaW50cyk7CiAgbGF5ZXIuYmF0Y2hEcmF3KCk7Cn0pOwoKc3RhZ2Uub24oIm1vdXNldXAgdG91Y2hlbmQiLCAoKSA9PiB7CiAgaXNEcmF3aW5nID0gZmFsc2U7Cn0pOw==

Which Konva.js shape is most suitable for implementing freehand drawing?

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.

Drawing and Freehand Tools

Drawing and Freehand Tools