Where can I find a Javascript drawing canvas?

Question

I want to build a drawing program in JS. (jQuery preferred but not mandatory).

Anyway, my vision is a big, blank, white canvas with a simple grid. The user could drag "layers" to the grid (such as icons, pictures, etc). Also, it would support drawing curves, lines, boxes, etc.

Think of Adobe Illustrator but much simpler. Honestly, it will be used to do database diagrams more than art (unless database diagrams are art to you...lol)

Is there anything out there like that?

Thanks

Answer 1

I'm sorry to inform you you won't be first with the idea.

Check out these - diagramo.com (html5/canvas) - lucidchart.com (html5/canvas) - gliffy.com (flash)

There are few more in the wild, though new addition is always good for competition!

Answer 2

For vector graphics I would suggest using inline SVG rather than something like canvas. To get you started here is something I wrote a long time back (before I knew about jslint, so it's not as neat as it should be) http://jsfiddle.net/ctrlfrk/mZzVD/

Here is a jquery svg library (I had it bookmarked, but haven't tried it): http://keith-wood.name/svgRef.html

The mozilla reference: https://developer.mozilla.org/en/SVG_Reference

And the actual spec: http://www.w3.org/TR/SVG11/index.html