Drawing basic shapes with HTML/CSS/Javascript

Question

I need to design a web app that allows visitors to draw and label basic shapes. The visitors will be drawing a basic map of a store. The shapes drawn will need to be stored in a database (their coordinates and sizes) along with their labels and a few options so they can be easily replicated later in a different app.

What's the easiest way to accomplish this on a web page?!

Answer 1

Take a look at http://zwibbler.com

Answer 2

If its lines and circles, You can use Bresenham's algorithm (Read up more in google, a 1x1px div with the color of your choice represents each point of a line or circle) once the algorithm has been implemented, you can use setAttribute to assign whatever attributes you want to to each line or circle that the user draws and store all the data by separating each shape with some proper delimiters and store it as a text file using FSO. The stored text file can be used as a means to save the users progress.. etc.

Answer 3

You can draw some cool shapes using pure CSS.

Check working example at http://jsfiddle.net/yFn6z/1/

Also more way to draw CSS shapes with borders
http://www.vanseodesign.com/css/creating-shapes-with-css-borders/
http://www.sendesignz.com/index.php/css/68-how-to-draw-speech-bubble-and-shapes-with-css3
http://net.tutsplus.com/articles/news/fun-with-css-shapes/

If you want to draw vector shapes of all kinds use Raphaël javascript library.

Answer 4

If I was doing this, I'd use Raphaël.

Check out the demos on the above link, it can do all sorts of crazy.

If you're after an actual code sample, I'll have a go using Raphaël if you like.

It works in many browsers:

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.