GraphicsJS allows you to create any web graphics you can imagine

JavaScript user APIs are the future of the Internet. The open source movement combined with SVG graphics has opened up opportunities for web developers.

GraphicsJS is a free open source library and JS API for creating custom graphics in web browsers. It can be used as a visualization tool to display data, or it can be used to create a cool thing just to show off.

Read also: A look at: Scalable Vector Graphics (SVG)

On the main page you will find a large section of demos created using GraphicsJS. And these examples only superficially show what is possible.

The library uses its own virtual DOM, which is an abstraction of the browser DOM. It is similar to a Reactive Virtual DOM and it is used in a similar way.

Since this library uses a DOM clone, it also needs real HTML elements to work. 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 configured and opened as its own JS API.
GraphicsJS supports all major browsers, even starting with IE6 and Chrome 1.0.

All the source code is available in the GitHub repository where you can download a copy and dig around if you have time. But I think the best way to learn to dive in the head.

You can view API documents, but I usually find these documents redundant. Documents are best used when you need to find a specific method or API call for a reference.

If you are just starting out, you can visit the playground posted on the AnyChart website. This is a good place to find examples of working code to break the syntax.

Or, if you really want to start with square one, then GraphicsJS, the getting started guide can help. This is more like ‘official’ documentation, so it will keep you on a smooth learning curve compared to API documents.

Anyway, I like that GraphicsJS has been opened and released to the developer community. This is far from an ideal library, but one of the best we have for creating your own SVG graphics from scratch.

And to make your gears rotate, below you can see a sample of what you can build with Graphics.js .

Read also: 9 Javascript libraries for creating interactive diagrams