CODEWITHSUNDEEP
javascripthtml
jklemmack
jklemmack

Reputation: 3636

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

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).

Upvotes: 6

Views: 19905

Answers (3)

Eliran Malka
Eliran Malka

Reputation: 16263

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.

Upvotes: 2

Anurag Uniyal
Anurag Uniyal

Reputation: 88777

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.

Upvotes: 7

Christian
Christian

Reputation: 28124

Basically, have a <canvas/> element overlay your <img/> and get the users to 'paint' into the canvas.

The paint capabilities will depend on what you need, which you didn't exactly specify, so this is as much as I can help.

Upvotes: 0

Related Questions