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 create.
Let's get started.
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.
canvas to handle its drawing animations. However, its primary focus is vector-based drawings instead of raster images.
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 Jerez uses a bunch of these layer and compositing features to create interesting effects with circles that change their shape upon collision.
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.
The Konva library is a little different from the libraries I've 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 the 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.
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 the 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, 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 and the use of patterns and gradients to fill shapes.
It comes with a clean and powerful API to manipulate and animate any existing SVG content, as well as generating SVG content dynamically. The library was developed with support for IE9 and above in mind. This made it easier for the developers to 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
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 with proper CSS selectors. Check out the example below, by Ronan Levesque.
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.
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 at the demo above by E T, and try editing the code to see how the diagram changes.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post