Pixi.js vs Konva.js vs D3.js

Question

I'm a graphics noobie and need help understanding the capabilities of the various javascript 2D libraries. . .

What do I get out of Pixi.js that I don't get out of a canvas-based library such as Konva?
What do I get out of Konva.js that I don't get out of an HTML/SVG/CSS library such as D3.js?

All I understand at this point is that Pixi is a WebGL library, and so you get faster rendering via GPU. But, I don't know how to describe what Konva does / how it works.

Any help with lingo etc would be immensely appreciated!

First you need to decide about Canvas vs SVG. If it's Canvas, I cannot give you an experience-based answer. If it's SVG, D3.js is a proven industry standard with a formidable dev community. Just compare the numbers of Q&A in Stack Overflow for D3 and other libraries. — Michael Rovinsky, Sep 16 '19 at 07:38

lavrton · Answer 1 · 2020-09-18T14:10:13.330

31

It all depends on your use case. What exactly do you want to draw?

A game like canvas application with a lot of graphics, images, filters, etc? http://pixijs.com/ will do the work.
Data visualizations or charts? Take https://d3js.org/
CAD-like applications for drawing some shapes and image manipulations? Take https://konvajs.org/ or http://fabricjs.com/

There are many other similar libraries for every use case. If you are not sure - just make a small prototype with each framework. You will see what works better for you.

edited Sep 18 '20 at 14:10

answered Sep 16 '19 at 14:25

lavrton

18,973
4
30
63

1

Be careful, some libraries work with WebGL and others not. Take account of that for better performance. – mtnp Jun 11 '21 at 07:52

Pixi.js vs Konva.js vs D3.js

1 Answers1