Introducing
The Slant team built an AI & it’s awesome
Find the best product instantly
Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to Safari
Try it now
4.7 star rating
0
Development
Utilities
Web
What are the best JavaScript drawing libraries?
34
Options
Considered
740
User
Recs.
Nov 27, 2023
Last
Updated
Related Questions
Activity
Have feedback or ideas?
Join our community
on Discord
Ad
29
Options
Considered
Best JavaScript drawing libraries
Price
Last Updated
72
D3.js
-
Jul 25, 2023
60
p5.js
-
Oct 28, 2023
56
Paper.js
-
Aug 19, 2022
56
Processing.js
-
Feb 12, 2021
56
Raphael
-
Dec 22, 2021
See Full List
72
D3.js
My Rec
ommendation
for
D3.js
My Recommendation for
D3.js
All
14
Pros
9
Cons
5
Top
Pro
•••
Fantastic tutorials and examples
The main author focuses heavily on supporting documentation, and it is very good.
See More
Top
Con
•••
Difficult to learn
See More
Top
Pro
•••
Very flexible join paradigm
Can be tricky at first, but once learned, data manipulation and binding can easily generate complex visualizations for massive amounts of data.
See More
Top
Con
•••
Performance issues with infinity loop animations
See More
Top
Pro
•••
Great for highly interactive scenes
D3.js offers incredible levels of interactivity.
See More
Top
Con
•••
"Selections" are elegant, but somewhat hard to grok
Selections are core to working with D3 beyond the basics. They're powerful and useful, but require new developers to get up to speed (e.g. set aside 30m to read and digest: https://github.com/mbostock/d3/wiki/Selections) and if used in the context of a larger application will result in a portion of the code using different patterns than the rest, requiring a translation layer in between.
See More
Top
Pro
•••
Backwards compatible
D3.js is intended for modern browsers, so supports IE9 and above (IE8 with an additional library) as well as all the other modern browsers.
See More
Top
Con
•••
Steep learning curve
The complexity and flexibility of D3.js results in it being a time-consuming tool to learn for many users. D3 is incredibly flexible; probably more so than any other JavaScript visualization library at the time of this posting. With that flexibility comes increased complexity. If you just want to create some quick charts you will get results faster with something else.
See More
Top
Pro
•••
Supports both Canvas and any HTML element rendering (including SVG)
This allows you to easily move HTML elements. If you need to render a large number of elements, canvas can be used (for example: earth).
See More
Top
Con
•••
No canvas rendering
See More
Top
Pro
•••
Doesn't require a proprietary framework
D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework.
See More
Top
Pro
•••
Huge number of examples online
Most of the examples provided are by the author, but there's also a great community writing plugins and more examples.
See More
Top
Pro
•••
Large community
D3.js is a very popular tool with an active community, resulting in plenty of learning resources and fast responses to questions.
See More
Top
Pro
•••
Faster
See More
Hide
See All
Get it
here
Recommend
187
26
60
p5.js
My Rec
ommendation
for
p5.js
My Recommendation for
p5.js
All
9
Experiences
3
Pros
5
Cons
1
Top
Pro
•••
Accessible documentation
Reference documentation and lots of examples are available directly on the website.
See More
Top
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.
See More
Mimarik's Experience
I have used this to put a simple visualization or a game together in a very short amount of time a few times in the past.
See More
Top
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.
See More
Parth Patel's Experience
Firstly, I would say p5.js is easy to learn library.
See More
Top
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),
See More
SuaveFides's Experience
I studied this for about 2 weeks with The Coding Train. Only about 2 of my 10 sketches would render on Chrome/Android(tablets, cel). Very disappointed. Had to give it up.
See More
Top
Pro
•••
Easiest to learn to obtain high grade results
In a few days any body can understand extremely complex figures in a few minutes.
See More
Top
Pro
•••
A lot of YouTube tutorials
See More
Hide
See All
Get it
here
Recommend
59
6
56
Paper.js
My Rec
ommendation
for
Paper.js
My Recommendation for
Paper.js
All
9
Experiences
2
Pros
5
Cons
2
Top
Pro
•••
Operator overloading
It is written in a language nearly identical to JavaScript, but adds helpful operator overloading to allow you to perform coordinate arithmetic.
See More
Top
Con
•••
Limited to single instance
The code is written in a way that everything is global and limited to a single instance, there is no clean way to use 2 separate instances in the same page
See More
DashingAphroditus's Experience
Used this library to implement CAD-like web application.
See More
Top
Pro
•••
Geometric Tests
An almost-unique feature: can test geometry if contains(), isInside() or intersects() one other object. Offers even hit-testing methods!
See More
Top
Con
•••
Not supported in older browsers
Paper.js runs on top of HTML5 Canvas, which is not supported in older browsers.
See More
PoliteNinkilim's Experience
I use it professionally for a live whiteboard service used by thousands of math students. It has its flaws, but I am consistently amazed by what we can do.
See More
Top
Pro
•••
Behaviours handled by objects
Objects in Paper make it easy to extend parent objects and run constructor functions without having to worry about JavaScript prototypal inheritance. Because of this it is easy to make compound drawing objects with their own instance variables and behaviors. Example: each swimming tadpole follows its own behavior These features make it easier to create objects that can act autonomously with complex behaviors. This makes Paper a good choice for particle effects and game development.
See More
Top
Pro
•••
Object constructors
Elements all have the option of being created with a hash of properties which promotes clean, concise, and contextually local coding practice.
See More
Top
Pro
•••
Good for making games
Paper uses a frame based approach to rendering the canvas. This makes it conceptually easier to create objects with animations and behaviors that interact and perform with other objects. Along with Paper's approach to creating and managing objects this makes Paper especially good for creating applications with complex behaviors with many elements doing different actions at once, and makes it a good choice for making games.
See More
Hide
See All
Get it
here
Recommend
67
14
56
Processing.js
My Rec
ommendation
for
Processing.js
My Recommendation for
Processing.js
All
5
Experiences
1
Pros
3
Cons
1
Top
Con
•••
Processing.js is now archived, and won't be updated
See More
Top
Pro
•••
Good at creating complex visual effects and filters
See More
SuccinctPheme's Experience
Processing.js is now archived, and won't be updated
See More
Top
Pro
•••
Fast rendering of complex scenes
Because Processing doesn't keep track of shape objects it's more efficient than other libraries. Processing can do more complicated effects faster than other libraries. Although this means you have to keep track of more yourself in your code, it also means you have more control over the finer details of how things are rendered. A demo showcasing the ability to create complex renderings
See More
Top
Pro
•••
Cross-platform compatibility
In processing you can write code in both JavaScript and Processing code. This allows you to use existing Processing code on the client side. Processing code is similar to Java in that it has static typing. This can make more complex calculations more robust, and less likely to cause conflicts. The library takes a more frame based approach to rendering, so you use drawing functions to draw directly to the frame without objects. This can make it easier to write efficient full frame rendering scenes and post processing effects.
See More
Hide
See All
Get it
here
Recommend
32
4
56
Raphael
My Rec
ommendation
for
Raphael
My Recommendation for
Raphael
All
7
Experiences
1
Pros
4
Cons
2
Top
Con
•••
Complicated, confusing documentation
The documentation is often not clear and lacks practical examples.
See More
Top
Pro
•••
Works with older browsers
Because Raphael supports rendering VML + SVG, it is one of the few drawing libraries that is backwards compatible with older browsers that do not support canvas.
See More
邵新中's Experience
very powerful, but will be replaced by Snap.svg, developed by the same programmer of Raphael.
See More
Top
Con
•••
Can be difficult to get support
Online communities for Raphael are small and inactive compared to other drawing libraries, and many issues opened on github are never addressed.
See More
Top
Pro
•••
Built in animations
Several built-in animations (such as ways of easing) are provided for you out of the box, but Raphael also allows cubic beziers for more complicated easing functions. Any drawing object property can be modified making it similar to css animations in jQuery.
See More
Top
Pro
•••
Every object is interactive with events
Everything that is drawn in Raphael is an object which means it is easy to manipulate any part of the rendered image after it is processed. It uses an event handler system for user inputs which makes it easy to learn for JavaScript developers used to event based libraries. An interactive chart demo. This style of handling objects makes Raphael a good fit for rendering interactive diagrams and charts that can also interact with other parts of the page.
See More
Top
Pro
•••
Easy creation of charts with extension
gRaphael is a Raphael extension to help you easily create graphs and charts.
See More
Hide
See All
Get it
here
Recommend
48
11
--
EaselJS
My Rec
ommendation
for
EaselJS
My Recommendation for
EaselJS
All
2
Experiences
1
Pros
1
Top
Pro
•••
Easy high-level API for working with objects and events
This makes it far faster and easier to do interactivity.
See More
PerceptiveCottus's Experience
Very quick and easy to use with solid documentation and support.
See More
Hide
Get it
here
Recommend
26
4
--
Snap.svg
My Rec
ommendation
for
Snap.svg
My Recommendation for
Snap.svg
All
7
Pros
4
Cons
3
Top
Pro
•••
Pure SVG library
See More
Top
Con
•••
Not actively developed
During 2016 was few updates, more updates in 2017
See More
Top
Pro
•••
Written by a SVG Guru and pioneer
Dmitry Baranovskiy also wrote Raphael (project now owned by Sencha), this is the updated modern version of that library. Dmitry also is a champion directly affecting the future of SVG standards with W3C
See More
Top
Con
•••
Spotty exporting
Exporting doesn't work well (if at all sometimes) with SVGs exported from anything other than Adobe products.
See More
Top
Pro
•••
Backed by Adobe
Adobe is backing the development of snap.svg
See More
Top
Con
•••
Weak documentation
Explanations provided in the documentation can often be unclear, with some features missing from the documentation all together.
See More
Top
Pro
•••
Features
Supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more
See More
Hide
See All
Get it
here
Recommend
22
2
--
Fabric.js
My Rec
ommendation
for
Fabric.js
My Recommendation for
Fabric.js
All
9
Experiences
1
Pros
6
Cons
2
Top
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.
See More
Top
Con
•••
No front-end only version via Node
NPM package has major dependencies.
See More
ToughCupid's Experience
I'm the author, just wanted to add a new pro. :)
See More
Top
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.
See More
Top
Con
•••
A little bit less support for Angular.js
https://github.com/michaeljcalkins/angular-fabric
See More
Top
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.
See More
Top
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!
See More
Top
Pro
•••
Good support for SVG multi-line text
Allows creating multi-line text that can even be interactively edited by user interaction.
See More
Top
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
See More
Hide
See All
Get it
here
Recommend
44
10
--
Shield UI Charts
My Rec
ommendation
for
Shield UI Charts
My Recommendation for
Shield UI Charts
All
6
Pros
5
Cons
1
Top
Pro
•••
ASP.NET implementation
Each chart can be implemented to ASP.NET and ASP.NET MVC applications, with detailed documentation and guides for each.
See More
Top
Con
•••
Commercial
Pay by developer starting from 349$.
See More
Top
Pro
•••
Multiple types of charts available
There are more than 20 types of charts available for use.
See More
Top
Pro
•••
Good support
Each of the available charts has documentation and guides available for every different implementation (JavaScript, ASP.NET etc.)
See More
Top
Pro
•••
JAVA Apache Wicket Wrappers, Wrappers for ASP.NET and ASP.NET MVC
See More
Top
Pro
•••
Great Variety, fast and robust
See More
Hide
See All
Get it
here
Recommend
14
1
--
GraphicsJS
My Rec
ommendation
for
GraphicsJS
My Recommendation for
GraphicsJS
All
9
Pros
9
Top
Pro
•••
Powerful line drawing
Not only Bezier curves but also any lines, shapes, arcs, etc. out-of-the-box.
See More
Top
Pro
•••
Convenient API
Clear and concise API with chaining support.
See More
Top
Pro
•••
Virtual DOM
Rapid drawing. Only what is necessary is drawn.
See More
Top
Pro
•••
Has its own transformation engine
No need to use embarrassing in-browser transformations.
See More
Top
Pro
•••
Legacy browser support
IE6+.
See More
Top
Pro
•••
Smart layering system
With z-index.
See More
Top
Pro
•••
Rich text features
Multiline text support, text measurement, wrap, indent, spacing, align, etc.
See More
Top
Pro
•••
Full accessibility (Section 508)
See More
Top
Pro
•••
Events support
All browser events are dispatched in the same way in virtual DOM structure also.
See More
Hide
See All
0
Recommend
32
12
--
svg.js
My Rec
ommendation
for
svg.js
My Recommendation for
svg.js
All
6
Experiences
1
Pros
5
Top
Pro
•••
Small library
Only 11k
See More
GraciousAphaea's Experience
Fast, comprehensive, unobtrusive and well documented.
See More
Top
Pro
•••
Pure SVG library
See More
Top
Pro
•••
Modular structure
See More
Top
Pro
•••
Actively Maintained
See More
Top
Pro
•••
Clear and detailed documentation
See More
Hide
See All
Get it
here
Recommend
15
--
pixi.js
My Rec
ommendation
for
pixi.js
My Recommendation for
pixi.js
All
3
Pros
3
Top
Pro
•••
Intuitive object model
See More
Top
Pro
•••
Will be familiar to ActionScript developers
Pixi.js uses a code structure that's very similar to ActionScript.
See More
Top
Pro
•••
Supports WebGL w/ canvas fallback
Pixi is a WebGL renderer, but can fall back to canvas if WebGL is not supported or turned off.
See More
Hide
See All
Get it
here
Recommend
16
10
--
Chart.js
My Rec
ommendation
for
Chart.js
My Recommendation for
Chart.js
All
6
Experiences
2
Pros
4
Top
Pro
•••
Small library without dependencies
See More
VersatileProserpina's Experience
very easy to get chart with few lines of code. Easy to adjust it.
See More
Top
Pro
•••
Easy to get started with
See More
WittyFengMeng's Experience
Simple to get started, complex drawings possible
See More
Top
Pro
•••
Lots of examples and tutorials available
See More
Top
Pro
•••
Open source
See More
Hide
See All
Free
Recommend
9
2
--
Three.js
My Rec
ommendation
for
Three.js
My Recommendation for
Three.js
All
4
Pros
3
Cons
1
Top
Pro
•••
Lots of users, big community
See More
Top
Con
•••
Poor garbage collection
Memory is quite slow to free up with three.js, causing issues with the performance of the project.
See More
Top
Pro
•••
Well documented
The documentation is detailed, providing clear explanations and code samples of the various features. There are also hundreds of examples available.
See More
Top
Pro
•••
Fallback canvas rendering
Three.js offers a canvas renderer as a fallback when WebGL is not available.
See More
Hide
See All
Get it
here
Recommend
2
--
Plotly
My Rec
ommendation
for
Plotly
My Recommendation for
Plotly
Hide
Get it
here
Recommend
3
--
Draw2D Touch
My Rec
ommendation
for
Draw2D Touch
My Recommendation for
Draw2D Touch
Hide
FREE
Recommend
8
--
Two.js
My Rec
ommendation
for
Two.js
My Recommendation for
Two.js
All
2
Pros
2
Top
Pro
•••
Excellent documentation
Good examples.
See More
Top
Pro
•••
Renderer agnostic
Uses "the same api to draw in multiple contexts: svg, canvas, and webgl."
See More
Hide
Get it
here
Recommend
7
1
--
Highcharts
My Rec
ommendation
for
Highcharts
My Recommendation for
Highcharts
All
3
Pros
3
Top
Pro
•••
Lots of good examples
The site has a selection of good examples that will help you get started quickly.
See More
Top
Pro
•••
Good documentation
Very handy with examples and explanations.
See More
Top
Pro
•••
Many different charts with lots of options
Highcharts provides 20 different types of charts to choose from, and they make it simple to combine chart types.
See More
Hide
See All
Get it
here
Recommend
1
--
NextCharts
My Rec
ommendation
for
NextCharts
My Recommendation for
NextCharts
All
2
Pros
2
Top
Pro
•••
Great diversity
Besides having all consecrated charts like line, area, bar, horizontal bar, pie, bubble , it can have styles for line dots (solid dot, hollow dot, star, bow, anchor) or bar types (like dome, cylinder, parallelepiped). It has support for stacked bars, negative bars, combo bar-line charts, dual axis, click events and tooltips.
See More
Top
Pro
•••
Free
Completely free and open-source as it uses the Apache license.
See More
Hide
Get it
here
Recommend
6
--
BonsaiJS
My Rec
ommendation
for
BonsaiJS
My Recommendation for
BonsaiJS
All
1
Experiences
1
PaulJ's Experience
Lightweight, intuitive, rendering in SVG.
See More
Hide
Get it
here
Recommend
2
Don't see your favorite option? Add it.
Built By the Slant team
Find the best product instantly.
4.7 star rating
Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to Safari
Try it now - it's free
One sec!
Are you sure that you want to abandon your hard work?
Delete Work
Continue working
{}
undefined
url next
price drop