GraphicsJS Lets You Create Any Web Graphics You Can Imagine
Custom JavaScript APIs are the future of the web. The open source movement coupled with SVG graphics have blown open the possibilities for web developers.
GraphicsJS is a free open source library and JS API for building custom graphics in web browsers. It can be used as a visualization tool for graphing data, or it can be used for making cool stuff just to show off.
Read Also: A Look into: Scalable Vector Graphics (SVG)
On the home page, you’ll find a big section of demos created with GraphicsJS. And these examples just scratch the surface of what’s possible.
The library uses its own virtual DOM which is an abstraction of the browser’s DOM. This is somewhat similar to React’s virtual DOM and it’s used in a similar manner.
Since this library uses a clone of the DOM, it also needs real HTML elements to work on. That’s why it uses SVG/VML rather than embedded objects in the HTML5 canvas.
This graphics engine was originally built into the AnyChart library. From there, it was tweaked and open-sourced as its own JS API.
GraphicsJS supports all major browsers, even dating back to IE6 and Chrome 1.0.
All source code is available in the GitHub repo where you can download a copy and poke around if you have time. But I think the best way to learn is to dive in head-first.
You could browse through the API docs but I usually find these docs superfluous. Docs are best used when you need to find a specific method or API call to reference.
If you’re just getting started you can visit the playground hosted on AnyChart’s website. This is a nice place to find working code samples to break down the syntax.
Or, if you really want to start with square one then the GraphicsJS starting guide can help. This is more like the “official” documentation so it’ll hold your hand for a smoother learning curve compared to the API docs.
Either way, I love that GraphicsJS was open sourced and released into the developer community. It’s far from a perfect library but it’s one of the best we have for creating custom SVG graphics from scratch.
And to get your gears turning, below you can see a sample of what you can build with Graphics.js.