Javascript drawing library?

Question

Any suggestion for a JavaScript interactive drawing library? Just need to draw lines, polygons, texts of different colors. IE/Firefox/Opera/Safari compatible.

score 47 · Answer 1 · edited Nov 16 '16 at 01:15

47

Raphael is pretty cool for that, and works across browsers since it uses VML (for MSIE) and SVG (for everything else).

edited Nov 16 '16 at 01:15

jjk

536
7
15

answered Sep 18 '08 at 20:26

Dan

61,568
9
61
78

Damn, you beat me to the punch ;) – Aeon Sep 18 '08 at 20:32
THANKS heaps this looks super awesome. will be using Raphael. – John Ballinger Oct 14 '10 at 01:51

score 15 · Answer 2 · answered Sep 18 '08 at 20:24

15

John Resig's Processing.js is a nice framework for that.

answered Sep 18 '08 at 20:24

Zach

24,496
9
43
50

how does processing.js compare with raphael for static graphics? – ina Aug 04 '10 at 12:40
1

Sadly Processing does not support IE. Thats a bit of a pity, it looks great though. – John Ballinger Oct 14 '10 at 01:49
2

Looks like IE is now supported (IE9) – yorjo Jul 27 '11 at 18:28

score 8 · Answer 3 · answered Sep 18 '08 at 20:23

8

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

answered Sep 18 '08 at 20:23

Craig B.

553
1
4
10

Canvas is the way to go for anything more than a few trivial boxes or lines. And excanvas works surprisingly well, at least on IE 7. – dgvid Sep 18 '08 at 20:36
looks like Raphael can do more than simple boxes and lines.. http://raphaeljs.com/ – ina Aug 04 '10 at 12:41

score 3 · Answer 4 · edited Jan 04 '12 at 16:23

3

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.

edited Jan 04 '12 at 16:23

Frodo

3
2

answered Sep 18 '08 at 20:25

Steve Moyer

5,663
1
24
34

1

That stuff (drawing by arranging HTML elements) doesn't scale particularly well, but it certainly works :) – Dan Sep 18 '08 at 20:39
True ... you certainly wouldn't build a CAD system this way, but it can do pretty complex drawings if you stick with orthogonal structures and images (lines, rectangles, etc) and spice them up a bit with images. Other drawing entities are built with multiple DIV elements each. – Steve Moyer Sep 18 '08 at 21:31
1

walterzorn.com doesn't seem to be around any more. :( – waterlooalex Nov 23 '10 at 21:08
new url: http://www.c-point.com/javascript_vector_draw.htm – quantumpotato Apr 26 '14 at 16:34

score 2 · Answer 5 · answered Feb 18 '11 at 15:18

Also mxGraph. This doesn't use excanvas for IE. Excanvas is way slower than using VML, specifically, re-using the same VML nodes rather than deleting, adding DOM nodes for redrawing. This is often a overlooked point, but excanvas on IE performance is just awful.

score 2 · Answer 6 · edited Jun 20 '20 at 09:12

2

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 18 '08 at 20:30

jjrv

4,211
2
40
54

In fact, VML supports text drawing natively, and the latest revisions of ExplorerCanvas have the text drawing methods recommended by the WHATWG ;) http://explorercanvas.blogspot.com/ – Fabien Ménager May 31 '09 at 00:17
Just as an update. Text is much less of a pain now(2011), it's been pretty good for the last year. iOS4.1+ finally supports text on canvases correctly and I know Android 2.1+ does as well. Firefox/Safari/Chrome always have had good canvas text support and IE9+ also does text in Canvas correctly. – Gabe Sep 02 '11 at 21:37

score 2 · Answer 7 · answered Sep 18 '08 at 20:31

2

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.

answered Sep 18 '08 at 20:31

VirtuosiMedia

52,016
21
93
140

score 2 · Answer 8 · answered Sep 18 '08 at 20:33

2

Checkout the jQuery Drawing plugin, and you can also look at the Mozilla Canvas reference and tutorial.

answered Sep 18 '08 at 20:33

Christian C. Salvadó

807,428
183
922
838

score 1 · Answer 9 · answered Sep 18 '08 at 20:24

1

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.

Canvas

answered Sep 18 '08 at 20:24

Steve g

2,471
17
16

score 0 · Answer 10 · answered May 27 '15 at 14:04

D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Take a look at this discussion too.

Javascript drawing library?

10 Answers10

Linked