Images and animations are engaging, entertaining, and great for conveying information that would be hard to process and understand with just written words. This is true for pictures that you take with a camera as well as drawings that you create using your computer. In this post, I'll show you some of the best free and open source JavaScript drawing libraries
There are a lot of free libraries that use technologies like the HTML5 canvas element and SVG to draw whatever you want in browsers. You can use the API provided by these libraries to not only draw but also animate whatever you created.
Let's get started.
Two.js
Two.js is a pretty popular and easy to use library when it comes to drawing 2D shapes with JavaScript. It is very well documented and you will have to spend very little time learning the basics.
There are two things that you will like about the library. First, it is render agnostic. This means that you can use the same API to draw your graphics on the canvas element, with SVG, or with WebGL. This feature has come to my rescue more than a few times when I have used the library. Second, the library also comes with built-in functionality to animate whatever you draw on the screen.
You can also update the size, position and color of different elements that you draw on screen by listening to different keyboard and mouse events making it easier to create simple games.
The above example by Jono Brandel uses Two.js to create an animated wavy road on canvas. You can find many more interesting projects on the official website.
Paper.js
The Paper.js library is another free and open source solution for people who want to draw using JavaScript. The library uses canvas to handle its drawing animations. However, its primary focus is vector based drawings instead of raster images.
There are two options for you to create graphics using the library. You can either continue using regular JavaScript or you can consider using a modified version of JavaScript that the library calls PaperScript. Using PaperScript will require you to spend a little extra time on learning how to use it. However, it comes with some advantages like easier computations for Point and Size objects used throughout the library.
You can do a lot of interesting things with the library with features such as nested layers, simple paths and compound paths. You can also smooth the curves that you draw with the library. You can also use blend modes to make the overlap between different elements more visually appealing.
The above CodePen by Alberto Jarez uses a bunch of these layer and compositing features to create interesting effects with circles that change their shape upon collision.
P5.js
The p5.js library is a great option for people who are looking for a library that doesn't have a steep learning curve, but which can create very complicated systems if necessary. The get started with P5.js page on the official website has a functional example that draws circles wherever you move your mouse in only a few lines of code.
The library is inspired by the popular Java Processing platform, and it has an active community of people to help you when you are stuck. There are a lot of examples available that showcase what the library is capable of doing. They are a big help when you are looking for inspiration. You can use them to learn how to simulate physics, create particle systems, and react to different user inputs.
The above example by Johan Karlsson uses p5.js to create some gnats that are moving around randomly on the canvas. Clicking anywhere inside the demo will create a new population of randomly placed gnats.
Konva
The Konva library is a little different from the libraries we have mentioned so far. You can use it to draw basic shapes on the canvas but it is entirely possible for you to do much more than that. You can add high performance animations and transitions to add visual appeal to whatever you draw on the canvas.
What makes this library special is that it allows you to attach event handlers to anything that you draw on the screen. You can select and move around a previously drawn object on the canvas. It is also possible to scale and rotate the selected objects without affecting anything else that you have drawn.
These features are perfect for people who want a library that can help them create simple sketching applications and well as drag-and-drop games on canvas. You can use groups to move and manipulate multiple shapes together.
The simple puzzle game above was built by Jakub Beneš using Konva. The basic idea is to select the box whose color is slightly different than the others.
Fabric.js
The Fabric.js library is built upon the same philosophy as Konva and has a lot of the same features. In fact, Fabric.js actually seems to be more popular and active than Konva.
The library provides an interactive object model built on top of the canvas element. This basically means that you can draw different objects like geometric shapes and images on canvas to later interact with them. The library gives your users the option to move, scale and rotate anything they draw on the canvas allowing you to build simple mockup apps or meme generators etc.
Try dragging the text around or adding your own shapes and images on the canvas in the CodePen by Martin Florian above. The homepage of the library showcases even more features like freehand drawing, use of patterns and gradients to fill shapes.
Snap.svg
The Snap.svg library is a popular choice among people who want to create resolution-independent vector graphics using the power of SVG and JavaScript. The library is open source and completely free to use.
It comes with a clean and powerful API to manipulate and animate any existing SVG content as well as generate SVG content dynamically. The library was developed with support for IE9 and above in mind. This made it easier for the developers provide features like masking, clipping and patterns, without worrying about support for old browsers.
The easy to use library comes with many methods to create basic shapes and apply properties like fill, stroke and strokeWidth using key-value pairs. You can also group elements together to make changes to multiple items at once. Different objects can be easily referenced either by their names or proper CSS selectors. Check out the example below, by Ronan Levesque.
SVG.js
Another popular option if you want to draw and animate SVG using JavaScript is to use the SVG.js library. The goal of the developers with this library was to make it as small and as fast as possible while providing almost full coverage of the SVG spec. There are no dependencies and the library can be used independently.
You can see how it performs with respect to Vanilla JS and Snap.svg on the homepage of the website. It is possible to create basic shapes and add them to the DOM using built-in functions. The library comes with all kinds of functions to manipulate the appearance of anything you draw on the screen. There is also support for event listeners so that you can implement functionality that changes or animates any SVG element based on user interaction.
Try changing the values of different options in the above CodePen by George Francis to generate unique patterns using SVG.js.
JS Sequence Diagrams
The last library on our list might not appeal to the masses but it does serve a unique purpose that makes its mention worthwhile. Have you ever worked on a project where you had to draw UML sequence diagrams? If you said yes, then the JS Sequence Diagrams library would probably be perfect for you.
The library will quickly create a simple SVG based sequence diagram for you using JavaScript. All you need to do is provide it with a valid textual representation. One thing that you might not like is that the library depends on a bunch of other libraries to work properly. This includes Snap.svg, Web Font Loader, underscore.js and optionally jQuery.
However, the library is still a great option for anyone who wants to quickly generate such diagrams without worrying about writing a lot of code. You can also apply your own CSS styling to change the color and fill of different components. Take a look in the demo above by E T, and try editing the code to see how the diagram changes.
Final Thoughts
There are a lot of free libraries that you can use to draw objects using JavaScript. Our goal in this post was to highlight some popular libraries with a decent feature set that address unique problems. Hopefully, this article helped you in choosing a library that can draw and animate elements on canvas as well as with SVG.
No comments:
Post a Comment