Easiest way to "draw" simple lines over an image with jQuery and save to Rails DB?

Question

I'd like to draw lines on an image. Basically allow the user to draw a path for mountain trails they like.

1) Does anyone know a good simple library for drawing basic lines?

2) After a user draws a bunch of lines on an image, what would be the best way to save the data to the database?

Answer 1

Drawing lines

• Paper.js . Look at the Path Simplification example.
• Raphaël - Raphael SketchPad

You can easily overlay the elements on top of an image so the user draws on the image.

Also, just for fun, but have you seen SVG-edit (demo)?

Saving the line data

The SketchPad script above provided drawn data in JSON that can be saved as plain text in the database. The same thing can be done on the objects from PaperJS. Here is a JSFiddle example with PaperJS (code) and here with an image as a background.