Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to SafariWhen comparing Fabric.js vs p5.js, the Slant community recommends p5.js for most people. In the question“What are the best JavaScript drawing libraries?” p5.js is ranked 2nd while Fabric.js is ranked 8th. The most important reason people chose p5.js is:
Reference documentation and lots of examples are available directly on the [website](http://p5js.org/).
Question Ranking
Pros
Pro Out of the box Node.js support
Fabric supports node.js, and has an npm package available for server side rendering with all the dependencies handled for you. This allows you to provide graceful degradation for image fallbacks to canvas or SVG content.
Pro Vector focused API
Drawing objects in fabric are vector focused, so everything is easily transformable. It makes it easy to create complex pathed shapes, add gradients, or filters. Although fabric is great for vector rendering, it also has image support as well.
Pro Outputs to canvas and SVG and JSON
When it comes to format compatibility, Fabric is the best, with the ability to output to Canvas, SVG, and JSON. SVG provides backwards compatibility for older browsers, and JSON allows you to store rendered output for later use.
Pro Great interaction with SVG, excellent coding
If you are about to customize the library to your needs, this is the project of choice! Great programming work!
Pro Good support for SVG multi-line text
Allows creating multi-line text that can even be interactively edited by user interaction.
Pro Browser only version now available
If the node-canvas dependency is a problem you can now look for npm install fabric@x.y.z-browser
Pro Accessible documentation
Reference documentation and lots of examples are available directly on the website.
Pro Great community
p5 users benefit from the Processing community's 15+ years of growth and discovery. Processing code can easily be converted to p5.
Pro General programming concepts
As a continuation of the Processing project, this frameworks helps in understanding the general programming concepts that goes beyond drawing (connecting electronics, using sounds or the webcam etc),
Pro Easiest to learn to obtain high grade results
In a few days any body can understand extremely complex figures in a few minutes.
Pro A lot of YouTube tutorials
Cons
Con No front-end only version via Node
NPM package has major dependencies.
Con A little bit less support for Angular.js
Con No built-in rendering
If looking for something to build UIs with or similar, one might be disappointed by the lack of any pre-defined UI element objects and such in p5.js. One has to write all the rendering code for any objects one includes, integrating it appropriately with the loop.
