Konva – HTML5 canvas manual route drawing solution

This is from a StackOverflow answer I made in response to a request for a way to show a route on a map with bends. In essence this is manipulation of the points array for a Konva Line object.

The user selects a point via a mouse click and that point goes into the points array. Additionally, to give the ability to add bends or refine the line, the point between the new point and its predecessor is also added to the array. This intermediate point can then be dragged, and when it is we split the lines to the previous and next points in two again.

Sounds complicated but the UX is pretty clear.

In this example the solution is used for drawing a route on a map, but it could just as easily be used to construct a path to be used as a clipping area on an image.

Thanks for reading.