Introducing GraphicsJS, a Powerful Lightweight Graphics Library

HTML5 is the backbone of the modern web. And nowadays, when it comes to creating interactive images, SVG and Canvas are often the technologies of choice — Flash has been forgotten, Silverlight is a rare unicorn that dwells on the outskirts of the Web, and there are few who remember 3rd party plugins.

Thank you for reading this post, don't forget to subscribe!

The pros and cons of each are well documented, but in a nutshell, SVG is better for suited to creating and handling interactive elements. This is because SVG is an XML-based vector format, and when an image is loaded into a page using an <svg> tag, every element within it becomes available in the SVG DOM.

In this article, I want to introduce you to GraphicsJS, a new and powerful open-source JavaScript drawing library, which is based on SVG (with VML fallback for old IE versions). I’ll start with a quick introduction to its basics, and then showcase the functionality of the library with the help of two short, yet spectacular samples: the first one is all about art, whereas the second one illustrates how to code a simple time-killer art game in less than 50 lines.

Why GraphicsJS

There are a lot of libraries out there that can help developers work with SVG: RaphaëlSnap.svg, and BonsaiJS to name a few of the best. Each of these has its own strengths and weaknesses, but their thorough comparison will be the subject of another article. This article is all about GraphicsJS, so let me explain what makes it good and special.

GraphicsJS, a lightweight and powerful SVG-based JavaScript graphics library by AnyChart

First of all, GraphicsJS is lightweight and has a very flexible JavaScript API. It implements many rich text features, as well as a virtual DOM — detached from the browser-specific implementation of the HTML DOM.

Secondly, it is a new open-source JavaScript library that was published as recently as last fall by AnyChart, one of leading global software developers in the field of interactive data visualization. AnyChart has been using GraphicsJS to render charts in its proprietary products for at least three years (since the release of the AnyChart 7.0) so GraphicsJS has been fully battle-tested. (Disclaimer, I am the head of R&D at AnyChart and the lead developer of GraphicsJS)

Thirdly, unlike AnyChart’s JavaScript charting libraries, GraphicsJS can be used for free in both commercial and non-profit projects. It is available on GitHub under the Apache license.

Fourthly, GraphicsJS is cross-browser compatible, supporting Internet Explorer 6.0+, Safari 3.0+, Firefox 3.0+, and Opera 9.5+. It renders in VML in older IE versions and SVG in all the other browsers.

Finally, GraphicsJS allows you to combine graphics and animation to great effect. Check out its main gallery which features an animated bonfirerotating galaxyfalling rainprocedure generated leavesplayable 15-puzzle, and much more. GraphicsJS contains many further examples in its extensive documentation and its comprehensive API Reference.

Read Full Article

Leave a Reply

Your email address will not be published. Required fields are marked *