The canvas element was introduced in HTML5 as a place to draw graphics with JavaScript. You can use it to do a lot of things. This include editing images, drawing simple or complicated shapes as well as animation.
In this article, we'll look at some of the best free canvas libraries in JavaScript. These can be used for visualizing data or creating simple animations and particle systems. Let's get started.
1. D3.js
The D3.js library is one of the most popular choices when it comes to visualizing any kind of data. It uses features of SVG, Canvas and regular HTML to create amazing graphs and charts. The library itself imposes almost no constraints on how you can present data to your users. You can use it to create racing bar charts, area charts or treemaps. If you can imagine a new and exciting way of presenting data, you can most probably build it with D3.js.
One of the things that might discourage you from using D3.js is its steep learning curve. It consists of over thirty modules and more than a thousand methods. This can be very intimidating. However, there are a lot of tutorials and detailed documentation to learn everything about the library.
This bouncy tree in the image above was created by Artem Zubkof with D3.js on a canvas. You can see many more examples on the D3 homepage.
2. Particles.js
The Particles.js library is perfect for people who want to create canvas based particle systems. It is lightweight and does not have any dependencies. It takes around half an hour to get yourself familiarized with all the features of the library. After that, you can just play around with the value of different parameters to see which ones create particle system that you like.
The library gives you control over a lot of parameters. You can specify the color and total number of particles. Particles of different shapes like circles and triangles are easy to create. You can even use images as particles. It is possible to make the particles interactive so that they either respond to each other's presence or to your actions like click and hover.
We were able to create this starry background in a few lines of code with Particles.js. You can read this introductory tutorial to get started with the library.
3. Matter-js
The matter-js library is a 2D rigid body physics engine written in JavaScript. You can use it to emulate simple physics systems on the canvas. It comes with many modules to help you achieve different tasks.
You can create simple rigid bodies or compound bodies and give them properties like mass, area and density etc. You also have control over the gravity and friction in the world you create. Both elastic and inelastic collisions are supported. One thing that you might notice when you play around with the library for a long time is that the system keeps loosing a bit of energy over time. This may or may not be a deal breaker for you. The library gives you the option to either use its own built-in renderer or go your own way.
Try clicking the Force buttons to move the ball around. You can reduce the friction in the system by pressing the Reduce Friction button.
The above CodePen demo is taken from one of our introductory tutorials on matter-js which give you full overview of the library. It will help you get started quickly by explaining different methods and properties that are available to you when using this engine.
4. Paper.js
Paper.js is an open source JavaScript based library that gives you the tools to create amazing graphics on the canvas. The library gives you the option to use its own version of JavaScript called PaperScript. It is similar to JavaScript but makes working with the library a bit easier. You can still continue using plain JavaScript if you don't want to use PaperScript.
The library has a lot of features. You can work with nested layers, groups, paths and compound paths among other things. It also supports simple mathematics for its Point and Size objects making calculations easier. Blend modes are available to make interaction between different layers possible.
Try clicking and dragging over the canvas in the above CodePen demo. You should see some pink circles on the path you followed with the mouse. The size of the circles will depend on your movement speed. This tutorial explains how you can add mouse and keyboard events based user interaction with Paper.js.
5. Fabric.js
The Fabric.js library allows you to draw simple shapes like circles, rectangle and other polygons on canvas with ease. You are not limited to just simple shapes. You can add images and more complicated shapes to the canvas as well.
Once the images and shapes have been drawn on the canvas. The library allows you to scale, rotate and move them around with your mouse. It is also possible to control attributes like color and opacity of the shapes after you have drawn them. The library employs a bunch of techniques like overlaying canvases, to make things as fast and efficient as possible.
The above CodePen by Arkellysis a great example of the functionality provided by Fabric.js. Click on the square, circle or triangle in the top right corner to draw them on the canvas. After that, you can drag them around or scale and rotate them with mouse.
6. Chart.js
The Chart.js library is a great alternative for people who want to create some common types of charts with the help of an easy-to-use canvas library. There are eight different chart types available to make it possible you to visualize your data. This includes the commonly-used line chart, bar chart and pie chart types along with others like radar charts and bubble charts.
There are a lot of customization options for drawing the charts as well as the scale. You can also update colors, change the data or add new datasets while making smooth animated transitions. You have full control over the visual elements in the chart.
The bar chart above was created by following the instructions in this introductory tutorial about line and bar charts in Chart.js.
7. Two.js
The Two.js library is a great solution for people who want to draw and animate two dimensional objects. It is render agnostic so you can use the same API to draw with SVG, canvas and WebGL.
The Two.js library keep tracks of things that you have drawn on the canvas and allows you to make changes to them at a later time. This includes rotating, scaling or translating those objects. There is a built-in animation loop in Two.js but you can also easily integrate a 3rd party animation library. The detailed documentation makes it easy for beginners to get started with the library and create something interesting.
Try clicking inside the above CodePen and it will start creating atoms of different elements. Each click will keep adding more spinning electrons in the orbit and protons neutron pairs in the nucleus. You can learn how to do things like that in this beginner friendly tutorial of the Two.js library.
8. Toast UI Image Editor
Toast UI is a fully-featured canvas-based image editor that can do a lot of things like crop, flip and rotate images. You can also apply filters to pixelate, emboss or add noise to images. The library also allows you to draw over images with icons or simple shapes once they have been loaded into the canvas.
The Toast UI image editor comes with 4 default themes which load all the functionality in form of different buttons and controls.
Another alternative for a canvas based image editor is the CamanJS library which gives you the freedom to design your own UI from scratch. It simply offers you all the image manipulation capabilities like changing the brightness, vibrance, noise and contrast of images. Unfortunately, the library is no longer maintained but you can still consider using it.
Final Thoughts
Our aim with this article was to introduce you to some free canvas based libraries that can do a variety of tasks. There are a lot of libraries available for drawing and animating things with the help of canvas. You can visualize any kind of data or a variety of chart types with a library like D3.js and you also have the option to keep things simple with a library like Chart.js. Similarly, you can create physics based simulations with Matter-js or animate 2D shapes with Two.js. We go into more details for each of these use cases in our other articles.
No comments:
Post a Comment