Drawing on top of an image in Javascript

Question

I want to let the user draw on an image in a browser. In other words, I need both bitmapped graphics and drawing capabilities, whether vector or bitmapped.

Canvas looks good, but is not supported by IE, and though there is ExCanvas, I wonder if ExCanvas is stable enough for consistent use in IE6 through 8.

Or best of all, is there an open-source image/drawing library that supports all this out of the box? I found two dozen or so Web-based image editors or drawing tools, but none support the requirements. (And I'd like to avoid Flash/Flex/Silverlight/JavaFX.)

Answer 1

Even though you said you'd like to avoid it I'd suggest Flash. You could easily use Flash 6 or 7 and these have a > 90% adoption rate. I'd be surprised if you could get that level of support with JavaScript. Flash is truly write once run anywhere, which will cut down on your development time.

Answer 2

check out dojo x

http://dojotoolkit.org/projects/dojox

Answer 3

You might be able to do it with VML

http://en.wikipedia.org/wiki/Vector_Markup_Language

Answer 4

Take a look at RaphaelJS... it's a cross browser implementation of drawing functions, using Canvas, VML or SVG where available. I'm not sure if it lets users draw for themselves out of the box, but it might be worth a look.

Answer 5

This is a very clever and very expansive library that I came across a while back: JS-Graphics

Answer 6

I'd add a little bit to Kieron's answer; Water Zorn's site has a very well featured vector graphics package. I've used it in a large application and it integrated beautifully with .NET and hand written javascript. I also used his drag and drop API to smooth dragging of html elements.

Answer 7

Use dojox.gfx. It is cross-browser (SVG/VML/Canvas/Silverlight) and it looks like it fits the bill. You can download it from the main Dojo site. You can try its tests and demos. Warning: the latter two links will be slow because the code was geared for debugging problems, not for speed (not minimized, not combined, not compressed, served from file server).