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!

Colvert

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. – Rebeca

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.

Salcido

Be careful, some libraries work with WebGL and others not. Take account of that for better performance. – Catt