Over a million developers have joined DZone.

Introduction to GraphicsJS, Powerful Free Open-Source Graphics Library

DZone's Guide to

Introduction to GraphicsJS, Powerful Free Open-Source Graphics Library

The author talks to us about a powerful JavaScript graphics library that definitely joins Raphaël and BonsaiJS at the top of the graphics libraries environment. Its name is GraphicsJS, and it is free and open-source.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Hello my fellow DZone lovers as well as casual guests,

Today I would like to tell you about a powerful JavaScript graphics library that definitely joins Raphaël and BonsaiJS at the top of the graphics libraries environment. Its name is GraphicsJS, and — good things are good — it is free and open-source.

For those of you who do not really like long reads, I'll start off with a raw list of this library's main features just in case you want to quickly grasp the gist and move further along the DZone feeds:

  • IE6+ support,
  • virtual DOM,
  • concise API, with chaining,
  • smart layering, with z-index,
  • any curves and shapes out of the box,
  • rich text manipulations;
  • events.

Now, when all those Twitter and other short-text worshippers have left the room, we can finally breathe in a lungful of fresh air and proceed to look into GraphicsJS, to see what makes it somewhat special.

Image title

What's It For?

GraphicsJS developers — the team behind AnyChart JS data visualization libraries fully built on their own GraphicsJS engine — assert that the range of potential use cases for this graphics library is more than just charting and indeed quite wide. I cannot help agreeing with them on this. GraphicsJS allows you to draw literally any visual thing, be it a simple static image, or a more sophisticated animated picture, a cartoon, a game — whatever you might name for "graphics".

The Getting Started guide placed on the main page of the GraphicsJS website shows how to draw the Deathly Hallows symbol in just slightly more than a dozen of pure code lines if we count even <script> and </script> taking two. "Of course it is happening inside your head, Harry, but why on earth should that mean that it is not real?" Haha.

<script type="text/javascript" src="https://cdn.anychart.com/js/latest/graphics.min.js"></script>
    // create a stage for the Deathly Hallows symbol
    stage = acgraph.create('stage-container-id');

    // draw the square
    stage.rect(25, 50, 350, 300);

    // draw the circle
    stage.circle(200, 250, 100);

    // draw the triangle
        .moveTo(25, 350)
        .lineTo(200, 50)
        .lineTo(375, 350)

    // draw the wand in the middle
        .moveTo(200, 50)
        .lineTo(200, 350);

And the result is like this:

Image title

More mature and complicated demos are listed just below and include Animated Bender from Futurama, interactive galaxy model, raindrops in the dark, burning bonfire, and more.

Image title

IE6+ Support

If you have ever worked with Chinese or Russian enterprise customers, I bet you totally understand why this is the first thing mentioned. Truly, there are still many places in the world where people — or I'd rather say, companies — still adhere to what we call today as legacy browsers. First and foremost, I mean IE6, IE7, and IE8. Unfortunately, BonsaiJS do not provide the legacy browser support, which made me love Raphael and now — GraphicsJS. The two latter work with IE6+, which is a big advantage nowadays.

Virtual DOM

I am almost sure each DZone reader has heard of React or even used it in one or another project. That said, I do not think we should waste time on explaining what "virtual DOM" stands for. But you are welcome to read this article if you want to learn more. In the case of GraphicsJS, I will just say that this library makes good use of the virtual DOM concept. As a result, visualization of any algorithm is very fast, especially if you compare it with the performance of Bonsai or Raphael.

One of also worth mentioning sub-features here is that GraphicsJS actually do not do so much unnecessary and superfluous drawing as other SVG/VML based libraries got used to.

Convenient API

Although this might be just a matter of taste, clear and concise APIs with chaining support are likely to have come in fashion. That is why I think GraphicsJS API is very robust. If we compare the length of code you get with Bonsai and with GraphicsJS under the same task, the obvious winner with less code required to be up and running with your project is likely to be GraphicsJS.

Layering, With z-index

Smart layering is essential when you are making complex visualizations and have to care of what elements are actually visible, when, and to what extent. As opposed to both Raphael and Bonsai, GraphicsJS supports the z-index that does a great job at determining the order of forms and shapes dynamically. No need to redraw everything from scratch again and again — this is extremely helpful, especially for all things big and tricky.

Powerful Drawing

GraphicsJS provides you with an opportunity to draw not just Bezier curves as basic elements - this is quite habitual for SVG/VML based graphics - but also arcs, circles, rectangles, ellipses, triangles, and any other objects out of the box. It is a great thing for coding quickly and efficiently.

Advanced Text Manipulations

The text feature set in GraphicsJS is quite extensive. To sum up, the key provisions are multi-line texts, control of width and other dimensions, as well as spacing, wrap, indent, overflow, and many other options to administrate the text things. It also can emulate HTML.


Since there is a DOM model under the hood, it also supports the ability to listen to a full set of browser events on any element of the image, just as in HTML. But unlike HTML where each browser maintains its own, specific style of event handling (remember the IE6 support), the events are formed in the same way for all environments.

In Place of a Conclusion

That's all folks! Now you know the basics about GraphicsJS, a nice and neat open-source graphics library that gives you broad HTML5 drawing opportunities for free. Please let me know in the comments if you noticed some other peculiar features the world should learn about. Of course, I'd love to read your thoughts on GraphicsJS and hear about your experience of using this or other graphics libraries, as well as to see your own JS graphics masterpieces if you decide to share any.

Thanks for being with me all along this article. I hope it is helpful. Have a good rest of the week!

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

graphics ,javascript ,visualization ,front-end developmemt ,html5 ,animation tools ,interactive web design ,data visualization

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}