Any suggestion for a JavaScript interactive drawing library? Just need to draw lines, polygons, texts of different colors. IE/Firefox/Opera/Safari compatible.
10 Answers
Raphael is pretty cool for that, and works across browsers since it uses VML (for MSIE) and SVG (for everything else).
You can use the canvas object directly to draw in 2D. IE requires the excanvas library.
http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas
Try http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm. It's the best I've found (without resorting to SVG) and works in most browsers without add-ins.
Drawing text with the canvas tag is a big pain. Your options are to use regular divs absolutely positioned in the right places, or find/write a font layout engine (example), or wait for a new standard to be implemented that lets you draw text. SVG deals with this much better.
In IE you have ExplorerCanvas to simulate the canvas API with IE's own VML markup. However, native VML can do text on a path and such things much like SVG. I think theoretically if you want complex text handling you'd want SVG and VML like the Raphael library that Dan mentioned.
You might also consider Flash for a moment before starting.
As mentioned above, canvas is the way you should go. IE doesn't support it natively, so you'll need to download ExCanvas to ensure cross-browser compatibility. I'd recommend looking at Ajaxian for some projects that use the canvas tag.
Checkout the jQuery Drawing plugin, and you can also look at the Mozilla Canvas reference and tutorial.
Depending on how cross-browser you need to be and your goal of doing the output, you might look into the Canvas element and the related javascript.
Related