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

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

Solution 2

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.

Solution 3

check out dojo x

http://dojotoolkit.org/projects/dojox

Solution 4

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

Solution 5

You might be able to do it with VML

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

View more solutions