Which JavaScript graphics library has the best performance?

Question

I'm doing some research for a JavaScript project where the performance of drawing simple primitives (i.e. lines) is by far the top priority.

The answers to this question provide a great list of JS graphics libraries. While I realize that the choice of browser has a greater impact than the library, I'd like to know whether there are any differences between them, before choosing one.

Has anyone done a performance comparison between any of these?

Joeri Sebrechts · Accepted Answer · 2019-03-13T08:46:22.797

Updated answer (2019):

The core advice is still the same: for maximal performance use thin wrappers or use raw browser API's, and also avoid the DOM or any DOM-like structure. In 2019 this means avoiding SVG (and any library built on top of it) because it may cause performance issues when trying to rapidly change the DOM.

Canvas is the go-to solution for high performance web graphics, both for the 2d and 3d (webgl) contexts. Flash is dead so no longer an option, but even if it weren't its performance was eventually matched by the native browser API's.

Original answer (2009):

If you're not doing 3d, just use raw canvas with excanvas as an explorer fall-back. Your bottleneck will be javascript execution speed, not line rendering speed. Except for IE, which will bog down when the scene gets too complex because VML actually builds a dom.

If you're really worried about performance though, definitely go with flash and write the whole thing in actionscript. You'll get an order of magnitude better performance, and with the flex sdk you don't even need to buy anything. There are several decent libraries for 3d in flash/flex available.

Yeah, this seems to be the consensus. Regarding Flash; that's what I usually use, but in this case I specifically want to do this in JS, for the sake of doing it in JS (inspired by Chrome Experiments). — DNS, Mar 25 '09 at 21:33
Hi, FROM THE FUTURE. It is 2013 and there are lots of good programmable graphics rendering libraries. Flash is essentially dead. There needs to be an "Obsolete" tag for questions/answers that were correct half a decade ago, but no longer are. — aendra, Sep 03 '13 at 13:57

score 7 · Answer 2 · answered Apr 26 '10 at 04:31

7

Raphael JavaScript Library

http://raphaeljs.com

answered Apr 26 '10 at 04:31

reelfernandes

181
2
5

score 3 · Answer 3 · answered Mar 23 '09 at 23:24

3

None of them have good performance. It is 2009 and the state of programmable graphics rendering in web browsers is truly depressing. I could do faster interactivity on a vt125 terminal 25 years ago. If you are doing anything interactive, think about using Flash... Else I'd go for some server-side heavy solution depending on your needs

answered Mar 23 '09 at 23:24

Scott Evernden

39,136
15
78
84

1

I know that none of them have good performance; I'm looking for which has the least terrible performance. And, although I've used Flash for a ton of other projects, I specifically want to do this in JS. – DNS Mar 23 '09 at 23:29
yeah i understand. i do. I've spent loads of years doing graphics and I really couldn't imagine doing anything interesting graphics-wise using pure JS. Maybe you are just doing flow-diagrams and it won't be so bad :/ – Scott Evernden Mar 23 '09 at 23:33
2

c'mon -- "javascript graphics" and "performance" really don't belong in the same sentence – Scott Evernden Mar 24 '09 at 01:19
unless there's a "horrendous" thrown in there somewhere (either place works, really) – cmptrgeekken Mar 24 '09 at 02:19

score 3 · Answer 4 · answered Jan 25 '12 at 17:41

Up to now - is used processing.js (javascript canvas implementation of "Processing" language) and/or raphael.js (tiny and handy VML/SVG javascript library).

The performance recomendations depends on task:

highly dynamic, complex primitives (or huge amount of it) - canvas (pixels, low-level API)
lower amount of primitives, highly scalable, integrated in DOM - SVG/VML (vector, high-level API)

score 0 · Answer 5 · answered Jan 04 '10 at 06:55

0

How about http://www.jsgl.org? It uses SVG/VML.

answered Jan 04 '10 at 06:55

Tregoreg

1

either make it a comment or elaborate it properly so it will explainatory. – anuj arora Jan 02 '13 at 13:28

score 0 · Answer 6 · edited Jan 25 '12 at 18:59

0

For basic drawing (such as lines, circles, and polygons), I would recommend Walter Zorn's Graphics Library. It was built with performance in mind and works in a ton of browsers.

edited Jan 25 '12 at 18:59

Matthew Crumley

101,441
24
103
129

answered Mar 24 '09 at 00:40

Josh Stodola

81,538
47
180
227

Check the performance benchmarks of this library and compare them with other popular ones. Then re-focus on the question, Captain ignorance. – Josh Stodola Mar 24 '09 at 01:54
The new url is [http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm](http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm) – István Ujj-Mészáros May 05 '11 at 06:47

cgp · Answer 7 · 2009-03-24T02:04:51.393

0

I know you said browser had more influence, so why not stick with using optimized SVG calls? Then, it "could" work in all browsers but...

Chrome is robust enough to do render 3D modeling efficiently:

http://www.chromeexperiments.com/detail/monster/

edited Mar 24 '09 at 02:04

answered Mar 24 '09 at 01:58

cgp

41,026
12
101
131

1

I was looking to trial WebGL on both Chrome and Firefox 5 today. It appears that because my PC is still "XP" ... the hardware driver isn't suitable. – will Aug 03 '11 at 13:26

Which JavaScript graphics library has the best performance?

7 Answers7

Linked