Obviously this code doesn’t work in its current state, but I digress. So drawing the line in the app consists of

.mousedown() .mousemove() .mouseup() .mouseleave()

so when you click initally, mousedown, move the mouse, mousemove, release the button on the mouse, mouseup, and when the mouse leaves the DOM element it was bound to, mouseleave, which won’t make an awkward line when the mouse comes back into the DOM element.

Learned new methods like

.siblings()

which will access the siblings in a child element and execute an event handler or another method.

We learned JavaScript specific ways to make the canvas interactive. The code looks like this: