Community Post

Introducing GraphicsJS, Powerful Free Open-Source JS Graphics Library

andreykh

Today, the world has first seen GraphicsJS, a new powerful JavaScript library intended for drawing graphics and animation with ease. Free and open-source, it is likely to be another strong competitor to BonsaiJS, Raphaël, and other similar SVG (VML) based components. Why, and what makes it so special? Let's have a look at some peculiar features of GraphicsJS and see it in action.

Features

First of all and in lockstep with its name, GraphicsJS can be utilized to produce virtually any graphical substance. It is like a paintbox with a brush that gives front-end developers the power to draw anything, from simple lines, cirlces and triangles to sophisticated interactive visualizations, cartoons, games, and whatever you might need for your HTML5 projects.

Typically, what you get from SVG and VML technologies out-of-the-box is Bézier curves. Parametric and indefinitely scalable, they certainly can be used for drawing any forms and objects. But what about ease? GraphicJS managed to move further and provide much more powerful out-of-the-box line drawing opportunities, with multiple forms and deformations available including arcs, straight lines, rectangles, and so on. Or, here is Bender from Futurama created with GraphicsJS from scratch, for example:

(Live Demo: Bender)

Second, GraphicsJS has rich text features. Unlike Raphael or Bonsai, it allows you to create multiline texts. What is also worth mentioning, GraphicsJS offers text measurement, including width, height, as well as wrap, overflow, indent, spacing, align, and so on.

(Live Demo: Animals Activity)

Third, inspired by React's awesome performance, GraphicsJS uses virtual DOM, so it works fast.

(Live Demo: Bonfire)

Fourth, GraphicsJS employs a layering system with z-index that is another innovation in the world of SVG/VML graphics libraries many developers got used to. Let's imagine you've just drawn a circle and a square, and the circle overlaps the square. Typically, if you ever decide to change the overlapping order, you will have to erase everything and draw the whole picture again, from scratch. With GraphicsJS, you are given the power to arrange this dynamically, which is extremely helpful when you are creating some big graphical thing and it is important for you to specify which elements must be seen at one or another moment.

(Live Demo: Pseudo-3D)

Fifth, GraphicsJS has a convenient API. Of course, it might be the matter of personal taste. However, this API is made quite concise and features chaining support, so I could call it quite stylish.

Sixth, GraphicsJS is fully cross-browser. In particular, unlike Bonsai for example, it supports legacy browsers (IE6+), which is still crucial for web development in many countries.

Now, let's proceed to the Getting Started section. In the meantime, I though you might like the idea of taking a short break and play the simple 15-Puzzle game built with GraphicsJS.

(Live Demo: 15-Puzzle)

Getting Started

To understand and feel the basics of how GraphicsJS works, let's draw a simple thing - the sign of the Deathly Hallows that I am sure you remember from the final novel of the Harry Potter series. Here is how it looks:

To start off, let's connect to the GraphicsJS library.

<script type="text/javascript" src="https://cdn.anychart.com/js/latest/graphics.min.js"></script>

Then, since no other dependencies are required, we can create a stage for the symbol right away. We will use the height and width of the main container, which is applied by default. However, it is possible to add custom width and height by specifying relevant parameters in brackets after the container's name, if needed.

stage = acgraph.create('stage-container-id');

Now that we created a stage, we can draw any pictures on it, using simple shapes. In this case, we will need one square and one circle to start with.

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

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

There are many drawing functions allowing you to create arcs, curves, and so on. To draw a triangle and a wand in the middle, we should use the versatile .path() method that generally allows us to build any shape we want.

// triangle
    stage.path()
        .moveTo(25, 350)
        .lineTo(200, 50)
        .lineTo(375, 350)
        .close();

    // middle line
    stage.path()
        .moveTo(200, 50)
        .lineTo(200, 350);

And - just to remind you - here is what we've got in result, with just a few lines of code:

You can easily improve this sample by coloring it, maybe with some layers using z-index, and then proceed to drawing more complicated things.

Conclusion

I hope you like my description of GraphicsJS and now get the idea of how to create graphics with its help. You are welcome to the library's Documentation, Playground, and API reference for more information and inspiration.

Generally speaking, there are numerous potential use cases for GraphicsJS, including animated pictures, cartoons, interactive infographics, mind maps, and so on, and so forth. A nice, vivid example is that the library was developed by AnyChart as the graphics engine for the company's charting libraries of AnyChart, AnyMap, AnyGantt, and AnyMap that are now driving interactive data visualization for Oracle, BP, Bosch, AT&T, Samsung, Microsoft, Volkswagen, Ford, Bank of China, and many other well-known companies and organizations around the world. Well, this is just one of many use cases.

Please share your own use cases with me once you get them, and I will be glad to read your tutorials on how to create other amazing things with GraphicsJS and other graphics libraries, here on Scotch, of course.