First use the information on the previous page to draw a line made up of a series of segments between clicked points.
Then to make the drawing smoother it would be better to push the mouse button down at the start of drawing and keep it held down while the mouse moves. End the line when the button is released. So instead of the single event listener for "click" we need to listen for 3 different kinds of event: "mousedown", "mousemove" and "mouseup". That means 3 different functions. Redraw the line every time the mouse moves. The path array will become much bigger but that is not a problem. Modify your program to do this.
You may need to use a true/false value on the global object to indicate when the mouse button is down. Something like DATA.mouseDown = false; at the start and later test with if (DATA.mouseDown) and so on.
You might also want to handle "mouseout", in case the mouse moves outside the canvas.
As a final touch make the "mouseup" listener do this when the line ends:
console.log(DATA.path);
You will then see that the console window (many pages back) can be used for examining any of our data and that can help in diagnosing any problems.