{"id":29391,"date":"2017-03-06T21:01:05","date_gmt":"2017-03-06T13:01:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29391"},"modified":"2017-12-09T19:56:32","modified_gmt":"2017-12-09T11:56:32","slug":"graphicsjs","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/graphicsjs\/","title":{"rendered":"GraphicsJS Lets You Create Any Web Graphics You Can Imagine"},"content":{"rendered":"

Custom JavaScript APIs<\/strong> are the future of the web. The open source movement<\/strong> coupled with SVG graphics<\/strong> have blown open the possibilities for web developers.<\/p>\n

GraphicsJS<\/a><\/strong> is a free open source library and JS API for building custom graphics<\/strong> in web browsers. It can be used as a visualization tool<\/strong> for graphing data, or it can be used for making cool stuff<\/a> just to show off<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tA Look into: Scalable Vector Graphics (SVG)<\/a>\n\t\t\t\t<\/p>\n

\"graphics<\/a><\/figure>\n

On the home page, you\u2019ll find a big section of demos<\/strong> created with GraphicsJS. And these examples just scratch the surface of what\u2019s possible.<\/p>\n

The library uses its own virtual DOM<\/strong> which is an abstraction of the browser\u2019s DOM. This is somewhat similar to React\u2019s virtual DOM<\/a><\/strong> and it\u2019s used in a similar manner.<\/p>\n

Since this library uses a clone of the DOM, it also needs real HTML elements<\/strong> to work on. That\u2019s why it uses SVG\/VML<\/a><\/strong> rather than embedded objects in the HTML5 canvas.<\/p>\n

This graphics engine was originally built into the AnyChart library<\/a><\/strong>. From there, it was tweaked<\/strong> and open-sourced as its own JS API<\/strong>.<\/p>\n

\"graphicsjs<\/a><\/figure>\n

GraphicsJS supports all major browsers<\/strong>, even dating back to IE6 and Chrome 1.0.<\/p>\n

All source code<\/strong> is available in the GitHub repo<\/a> 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.<\/p>\n

You could browse through the API docs<\/a><\/strong> but I usually find these docs superfluous. Docs are best used when you need to find a specific method or API call<\/strong> to reference.<\/p>\n

If you\u2019re just getting started you can visit the playground<\/a><\/strong> hosted on AnyChart\u2019s website. This is a nice place to find working code samples<\/strong> to break down the syntax.<\/p>\n

Or, if you really want to start with square one then the GraphicsJS starting guide<\/a><\/strong> can help. This is more like the \u201cofficial\u201d documentation so it\u2019ll hold your hand for a smoother learning curve<\/strong> compared to the API docs.<\/p>\n

Either way, I love that GraphicsJS was open sourced and released into the developer community. It\u2019s far from a perfect library but it\u2019s one of the best we have for creating custom SVG graphics from scratch<\/strong>.<\/p>\n

And to get your gears turning, below you can see a sample<\/a> of what you can build with Graphics.js.<\/p>\n