"Draw" on top of an image in HTML & Javascript

Question

I am building a web-app that will users mark-up images by "drawing" on it with their cursor. We'll take the users drawings and send it to the server to be converted to PNG or some other format for storage.

We need this app to work on both desktop- and tablet-based browsers, so Flash, Java, & Silverlight are out. We want to support IE8+, FF, Chrome, & Safari. Is there any type of Javascript library that will offer up some form of primitive MS-Paint-like drawing capabilities so I can send that data to the server?

This question is similar, but I'm looking for something that'd encode organic, human gestures, not draw them out.

(And no, creating native apps for each different mobile platform is not within our core competency or budget, so that's not a viable alternative).

Answer 1

You can either use the html canvas element or use SVG library like Raphael e.g. http://ianli.com/sketchpad/ is a library using Raphael.

Answer 2

you can use vector-graphics rendering JavaScript libraries, such as Raphaël.

Raphaël will also support a vast range of user agents, as it renders using VML for IE (< 9), or SVG for modern browsers.