JS Help With Canvas

[TapeGun007]

So... I'm more of a PHP/mySQL guy.  

I'm going to be attempting to program a graph drawing type of program that I want to be specifically web based.  Here is what I would like to accomplish (hopefully, it will make sense):

• I need a grid just like graph paper, only smaller, tighter squares.
• I want to draw lines that will snap to that grid.
• While the line is being drawn, it should say how many feet that line is.
• Once the line is drawn, I should be able to select it and move it or resize it.
• It needs to work with both mouse and touchscreen.
• I want to be able to save the graph and all the drawings on it and be able to recall them later.

I have found a few examples that do various elements of the above, but I cannot seem to figure out how to combine them into a single program.  If you have any places I can go to read about this, I'm more than willing to read and learn.

Basically, I'll be graphing homes from a birds eye perspective.

 

Here is my work so far:

https://depests.com/leads/test/graph2.html - This has a graph and the object snaps to grid.

https://depests.com/leads/test/test2.html - This allows me to draw lines, but they don't snap to a grid.

https://depests.com/leads/test/test3.html - This tracks mouse and/or ipad touch movement, so I have something as sort of a guide on touch/mouse functionality.