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!

Answer 1

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.