{"id":3054,"date":"2017-05-03T05:14:04","date_gmt":"2017-05-03T05:14:04","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=3054"},"modified":"2018-06-28T04:33:06","modified_gmt":"2018-06-28T04:33:06","slug":"javascript-drawing-library-graphicsjs","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/","title":{"rendered":"JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint"},"content":{"rendered":"<p><a href=\"http:\/\/www.graphicsjs.org\" target=\"_blank\" rel=\"nofollow\">GraphicsJS<\/a>, our powerful JavaScript drawing library that <a href=\"https:\/\/www.anychart.com\/blog\/2016\/09\/15\/anychart-open-source-powerful-draw-anything-js-graphics-library-graphicsjs\/\" target=\"_blank\">we open-sourced last year<\/a>, has recently got an <strong>update to version 1.2.0<\/strong>. It is the next\u00a0best news of 2017, a great addition\u00a0to <a href=\"https:\/\/www.anychart.com\/blog\/2017\/02\/14\/anychart-wins-2017-devies-award-for-best-javascript-technologies\/\" target=\"_blank\">winning\u00a0a\u00a0Devies Award<\/a> with GraphicsJS for\u00a0the category &#8220;JavaScript Technologies&#8221; and to the <a href=\"https:\/\/www.anychart.com\/blog\/2017\/02\/28\/anychart-javascript-charting-libraries-7-13-0-released-source-code-opened\/\" target=\"_blank\">7.13.0<\/a>\/<a href=\"https:\/\/www.anychart.com\/blog\/2017\/04\/18\/javascript-charts-library-update-anychart\/\" target=\"_blank\">7.13.1<\/a> releases\u00a0of our JS\/HTML5 charting solutions <a href=\"https:\/\/www.anychart.com\/products\/anychart\/overview\/\" target=\"_blank\">AnyChart<\/a>, <a href=\"https:\/\/www.anychart.com\/products\/anystock\/overview\/\" target=\"_blank\">AnyStock<\/a>, <a href=\"https:\/\/www.anychart.com\/products\/anymap\/overview\/\" target=\"_blank\">AnyMap<\/a>, and <a href=\"https:\/\/www.anychart.com\/products\/anygantt\/overview\/\" target=\"_blank\">AnyGantt<\/a>.<\/p>\n<p>So, we invite you to\u00a0take a very quick look at the most important updates (we&#8217;ll highlight the two below). And\u00a0then \u2013 in case you want to feel the real power of JavaScript drawing and have not used GraphicsJS in your business or fun web projects yet \u2013 we are sharing a nice article published on <a href=\"https:\/\/www.sitepoint.com\" target=\"_blank\" rel=\"nofollow\">SitePoint<\/a> just recently. It is an\u00a0<strong>introduction to GraphicsJS based on two tutorials<\/strong>. They\u00a0will guide you through the most valuable features of this JavaScript drawing library and demonstrate\u00a0them in action, and you&#8217;ll learn how to easily create a na\u00efve art picture and a time-killer game.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg\" alt=\"GraphicsJS, a lightweight and powerful SVG-based JavaScript drawing library by AnyChart\" width=\"750\" height=\"300\" \/><\/p>\n<h3>JavaScript Drawing with GraphicsJS: Main Improvements<\/h3>\n<ul>\n<li>Closure library and Closure compiler were\u00a0updated\u00a0to version 20161024.<\/li>\n<li>Enjoy an improved JavaScript drawing performance! In particular, we optimized the process of obtaining\u00a0a link to a container for the stage. Also, resize events are now\u00a0handled with the help of the Timer object, not the iFrame element.<\/li>\n<\/ul>\n<p>Now, you are welcome to read the SitePoint article about GraphicsJS. Please do not forget to ask your questions, if any. You may do that by leaving a comment here right below the article.<\/p>\n<p><!--more--><\/p>\n<h2>Introducing GraphicsJS, a Powerful Lightweight Graphics Library<\/h2>\n<p><em>This article was <span class=\"il\">originally<\/span> <span class=\"il\">published<\/span> on <a href=\"https:\/\/www.sitepoint.com\/introducing-graphicsjs-a-powerful-lightweight-graphics-library\/\" target=\"_blank\" rel=\"nofollow\">SitePoint<\/a>.<\/em><\/p>\n<p>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 \u2014 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.<\/p>\n<p>The pros and cons of each are <a href=\"https:\/\/www.sitepoint.com\/canvas-vs-svg-choosing-the-right-tool-for-the-job\/\" target=\"_blank\" rel=\"nofollow\">well documented<\/a>, 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 <code>&lt;svg&gt;<\/code> tag, every element within it becomes available in the SVG DOM.<\/p>\n<p>In this article, I want to introduce you to <a href=\"http:\/\/www.graphicsjs.org\/\" target=\"_blank\" rel=\"nofollow\">GraphicsJS<\/a>, a new and powerful open-source JavaScript drawing library, which is based on SVG (with <a href=\"https:\/\/en.wikipedia.org\/wiki\/Vector_Markup_Language\" target=\"_blank\" rel=\"nofollow\">VML<\/a> fallback for old IE versions). I\u2019ll 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.<\/p>\n<h3>Why GraphicsJS<\/h3>\n<p>There are a lot of libraries out there that can help developers work with SVG: <a href=\"https:\/\/dmitrybaranovskiy.github.io\/raphael\/\" target=\"_blank\" rel=\"nofollow\">Rapha\u00ebl<\/a>, <a href=\"https:\/\/snapsvg.io\/\" target=\"_blank\" rel=\"nofollow\">Snap.svg<\/a>, and <a href=\"https:\/\/bonsaijs.org\/\" target=\"_blank\" rel=\"nofollow\">BonsaiJS<\/a> 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.<\/p>\n<p>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 \u2014 detached from the browser-specific implementation of the HTML DOM.<\/p>\n<p>Secondly, it is a new open-source JavaScript library that was <a href=\"https:\/\/www.anychart.com\/blog\/2016\/09\/15\/anychart-open-source-powerful-draw-anything-js-graphics-library-graphicsjs\/\" target=\"_blank\">published as recently as last fall<\/a> by <a href=\"https:\/\/www.anychart.com\/\" target=\"_blank\">AnyChart<\/a>, 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&amp;D at AnyChart and the lead developer of GraphicsJS)<\/p>\n<p>Thirdly, unlike AnyChart\u2019s JavaScript charting libraries, GraphicsJS can be used for free in both commercial and non-profit projects. It is available on <a href=\"https:\/\/github.com\/anychart\/graphicsjs\" target=\"_blank\" rel=\"nofollow\">GitHub<\/a> under the Apache license.<\/p>\n<p>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.<\/p>\n<p>Finally, GraphicsJS allows you to combine graphics and animation to great effect. Check out its <a href=\"http:\/\/www.graphicsjs.org\/\" target=\"_blank\" rel=\"nofollow\">main gallery<\/a> which features an <a href=\"https:\/\/playground.anychart.com\/gallery\/latest\/Graphics\/Bonfire-plain\" target=\"_blank\" rel=\"nofollow\">animated bonfire<\/a>, <a href=\"https:\/\/playground.anychart.com\/gallery\/latest\/Graphics\/Galaxy-plain\" target=\"_blank\" rel=\"nofollow\">rotating galaxy<\/a>, <a href=\"https:\/\/playground.anychart.com\/gallery\/latest\/Graphics\/Rain-plain\" target=\"_blank\" rel=\"nofollow\">falling rain<\/a>, <a href=\"https:\/\/playground.anychart.com\/gallery\/latest\/Graphics\/Tree-plain\" target=\"_blank\" rel=\"nofollow\">procedure generated leaves<\/a>, <a href=\"https:\/\/playground.anychart.com\/gallery\/7.12.0\/Graphics\/Puzzle_15-plain\" target=\"_blank\" rel=\"nofollow\">playable 15-puzzle<\/a>, and much more. GraphicsJS contains many further examples in its extensive <a href=\"https:\/\/docs.anychart.com\/latest\/Graphics\/Overview\" target=\"_blank\" rel=\"nofollow\">documentation<\/a> and its comprehensive <a href=\"https:\/\/api.anychart.com\/latest\/anychart.graphics\" target=\"_blank\" rel=\"nofollow\">API Reference<\/a>.<\/p>\n<h3>GraphicsJS Basics<\/h3>\n<p>To start with GraphicsJS, you need to reference the library and create a block-level HTML element for your drawing:<\/p>\n<pre style=\"background-color: #ffffff;\"><code>&lt;html lang=\"en\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\" \/&gt;\r\n    &lt;title&gt;GraphicsJS Basic Example&lt;\/title&gt;    \r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"stage-container\" style=\"width: 400px; height: 375px;\"&gt;&lt;\/div&gt;\r\n\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/js\/latest\/graphics.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n      \/\/ GraphicsJS code here\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>Then you should create a stage and draw something in it, such as a <a href=\"https:\/\/api.anychart.com\/latest\/anychart.graphics#rect\" target=\"_blank\" rel=\"nofollow\">rectangle<\/a>, a <a href=\"https:\/\/api.anychart.com\/latest\/anychart.graphics#circle\" target=\"_blank\" rel=\"nofollow\">circle<\/a>, or other <a href=\"https:\/\/docs.anychart.com\/latest\/Graphics\/Shapes\" target=\"_blank\" rel=\"nofollow\">shape<\/a>:<\/p>\n<pre style=\"background-color: #ffffff;\"><code>\/\/ create a stage\r\nvar stage = acgraph.create('stage-container');\r\n\/\/ draw a rectangle\r\nvar stage.rect(25, 50, 350, 300);<\/code><\/pre>\n<p>Here is <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/oBPEzE\" target=\"_blank\" rel=\"nofollow\">the example on CodePen<\/a> in which we go a little bit further and draw <a href=\"https:\/\/harrypotter.wikia.com\/wiki\/Deathly_Hallows\" target=\"_blank\" rel=\"nofollow\">the Deathly Hallows<\/a> symbol.<\/p>\n<h3>Our First Masterpiece<\/h3>\n<h4>Fill, Stroke and Pattern Fill<\/h4>\n<p>Any shape or a path can be colored using <a href=\"https:\/\/docs.anychart.com\/latest\/Graphics\/Fill_Settings\" target=\"_blank\" rel=\"nofollow\">fill settings<\/a> and <a href=\"https:\/\/docs.anychart.com\/latest\/Graphics\/Stroke_Settings\" target=\"_blank\" rel=\"nofollow\">stroke settings<\/a>. Everything has a stroke (border), but only shapes and closed paths have a fill. Fill and stroke settings are very rich, you can go as far as a linear or circular gradient for both fill and stroke. Also, lines can be dashed, and image fill with several tiling modes is supported. But all this is a pretty standard stuff you can find in almost any library. What makes GraphicsJS special is its <a href=\"https:\/\/docs.anychart.com\/latest\/Graphics\/Hatch_Fill_Settings\" target=\"_blank\" rel=\"nofollow\">hatch and pattern fill<\/a> feature that allows you not only to use one of the 32(!) available <a href=\"https:\/\/api.anychart.com\/latest\/anychart.graphics.vector.HatchFill.HatchFillType\" target=\"_blank\" rel=\"nofollow\">hatch fill patterns<\/a> out of the box, but also to easily create your own patterns made of shapes or text.<\/p>\n<p>Now, let\u2019s see what exactly is possible! I will draw a small picture of a man standing near a house and then enhance it with different pattern and colour fills. For the sake simplicity, let\u2019s make it a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Na%C3%AFve_art\" target=\"_blank\" rel=\"nofollow\">na\u00efve art<\/a> picture (and try not to get into <a href=\"https:\/\/en.wikipedia.org\/wiki\/Outsider_art\" target=\"_blank\" rel=\"nofollow\">art brut<\/a>). Here it goes:<\/p>\n<pre style=\"background-color: #ffffff;\"><code>\/\/ create a stage\r\nvar stage = acgraph.create('stage-container');\r\n\r\n\/\/ draw the frame\r\nvar frame = stage.rect(25, 50, 350, 300);\r\n\r\n\/\/ draw the house\r\nvar walls = stage.rect(50, 250, 200, 100);\r\nvar roof  = stage.path()\r\n  .moveTo(50, 250)\r\n  .lineTo(150, 180)\r\n  .lineTo(250, 250)\r\n  .close();\r\n\r\n\/\/ draw a man\r\nvar head = stage.circle(330, 280, 10);\r\nvar neck = stage.path().moveTo(330, 290).lineTo(330, 300);\r\nvar kilt = stage.triangleUp(330, 320, 20);\r\nvar rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);\r\nvar leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);<\/code><\/pre>\n<p>Check out <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/VPGQKx\" target=\"_blank\" rel=\"nofollow\">the result on CodePen<\/a>.<\/p>\n<p>As you can see we are using variables now \u2014 all methods that draw something on the stage return a reference to the object created, and this link can be used to alter or remove the object.<\/p>\n<p>Also note how chaining, which is everywhere in GraphicsJS, helps shorten the code. Chaining (e.g. <code>stage.path().moveTo(320, 330).lineTo(320, 340);)<\/code> should be used carefully, but it does make the code compact and easier to read if properly applied.<\/p>\n<p>Now, let\u2019s give this coloring page to a child and let them color it. Because even a child can master the following technique:<\/p>\n<pre style=\"background-color: #ffffff;\"><code>\/\/ color the picture\r\n\/\/ fancy frame\r\nframe.stroke([\"red\", \"green\", \"blue\"], 2, \"2 2 2\");\r\n\/\/ brick walls\r\nwalls.fill(acgraph.hatchFill('horizontalbrick'));\r\n\/\/ straw roof\r\nroof.fill(\"#e4d96f\");\r\n\/\/ plaid kilt\r\nkilt.fill(acgraph.hatchFill('plaid'));<\/code><\/pre>\n<p>Here\u2019s <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/QdVQqb\" target=\"_blank\" rel=\"nofollow\">what our example looks like now<\/a>.<\/p>\n<p>Now we have a picture of a highlander in a kilt, who is standing near his brick castle with a straw roof. We can even go out on a limb and say it is indeed a piece of art which we want to copyright. Let\u2019s do that with the custom text-based pattern fill:<\/p>\n<pre style=\"background-color: #ffffff;\"><code>\/\/ 169 is a char code of the copyright symbol\r\nvar  text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2);\r\nvar  pattern_font = stage.pattern(text.getBounds());\r\npattern_font.addChild(text);\r\n\/\/ fill the whole image with the pattern\r\nframe.fill(pattern_font);<\/code><\/pre>\n<p>As you can see, this is very easy to do: you create an instance of a <a href=\"https:\/\/api.anychart.com\/latest\/anychart.graphics.vector.Text\" target=\"_blank\" rel=\"nofollow\">text object<\/a>, then form a <a href=\"https:\/\/api.anychart.com\/latest\/anychart.graphics.vector.Stage#pattern\" target=\"_blank\" rel=\"nofollow\">pattern<\/a> in a stage, and put a text into the pattern.<\/p>\n<p class=\"codepen\" data-height=\"484\" data-width=\"600\" data-theme-id=\"0\" data-slug-hash=\"RKYyoV\" data-default-tab=\"js,result\" data-user=\"SitePoint\" data-embed-version=\"2\" data-pen-title=\"GraphicsJS - colored copyrighted house\">See the Pen <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/RKYyoV\/\" target=\"_blank\" rel=\"nofollow\">GraphicsJS &#8211; colored copyrighted house<\/a> by SitePoint (<a href=\"http:\/\/codepen.io\/SitePoint\" target=\"_blank\" rel=\"nofollow\">@SitePoint<\/a>) on <a href=\"http:\/\/codepen.io\" target=\"_blank\" rel=\"nofollow\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h4>Create a Time-Killer Art Game in Less Than 50 Lines of Code<\/h4>\n<p>In the next part of this article, I want to show you how to create a <a href=\"http:\/\/orteil.dashnet.org\/cookieclicker\/\" target=\"_blank\" rel=\"nofollow\">Cookie Clicker<\/a> type game with GraphicsJS in less than 50 lines of code.<\/p>\n<p>The name of the game is <em>\u201cStreet Sweeper in the Wind\u201d<\/em>, and the player takes the role of a street sweeper cleaning a street during a windy fall afternoon. The game uses some code from the <a href=\"https:\/\/playground.anychart.com\/gallery\/latest\/Graphics\/Tree-plain\" target=\"_blank\" rel=\"nofollow\">procedure generated leaves<\/a> sample in the GraphicsJS gallery.<\/p>\n<p>You can check out the <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/NdLMgB\" target=\"_blank\" rel=\"nofollow\">finished game on CodePen<\/a> (or at the <a href=\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#theendresult\" target=\"_blank\">end of the article<\/a>).<\/p>\n<h4>Layers, zIndex and the Virtual DOM<\/h4>\n<p>We start off by creating a stage (as before), then declaring some initial variables:<\/p>\n<pre style=\"background-color: #ffffff;\"><code>\/\/ create stage\r\nvar stage = acgraph.create(\"stage-container\");\r\n\r\n\/\/ color palettes for leaves\r\nvar palette_fill = ['#5f8c3f', '#cb9226', '#515523', '#f2ad33', '#8b0f01']; \r\nvar palette_stroke = ['#43622c', '#8e661b', '#393b19', '#a97924', '#610b01'];\r\n\r\n\/\/ counter\r\nvar leavesCounter = 0;<\/code><\/pre>\n<p>For this game we\u2019re going to be working with <a href=\"https:\/\/docs.anychart.com\/latest\/Graphics\/Layers\" target=\"_blank\" rel=\"nofollow\">Layer<\/a> \u2014 an object intended for grouping elements in GraphicsJS. Elements must be grouped if you want to apply similar changes to them, such as transformations. You can change layers when in suspended mode (more about this later), which improves performance and the user experience.<\/p>\n<p>In this demo, we are using the layer functionality to help us group leaves together and avoid them covering the label (which tells us how many were swiped). To do this, we create a label and then call the <code>stage.layer<\/code> method, which create stage bound layer. We assign this layer a lower <code>zIndex<\/code> property than that of the label.<\/p>\n<pre style=\"background-color: #ffffff;\"><code>\/\/ create a label to count leaves\r\nvar counterLabel = stage.text(10,10, \"Swiped: 0\", {fontSize: 20});\r\n\r\n\/\/ a layer for the leaves\r\nvar gameLayer = stage.layer().zIndex(counterLabel.zIndex()-1);<\/code><\/pre>\n<p>After doing that, no matter how many leaves we create in the layer, we can be sure they won\u2019t cover the text.<\/p>\n<h4>Transformations<\/h4>\n<p>Next, let\u2019s add a function to draw our leaves. This will make use of the convenient GraphicsJS transformations API that allows you to move, scale, rotate and shear both elements and groups of elements. When used in conjunction with layers and a virtual DOM, this is a very powerful tool.<\/p>\n<pre style=\"background-color: #ffffff;\"><code>function drawLeaf(x, y) {\r\n  \/\/ choose a random color from a palette\r\n  var index = Math.floor(Math.random() * 5);\r\n  var fill = palette_fill[index];\r\n  var stroke = palette_stroke[index];\r\n\r\n  \/\/ generate random scaling factor and rotation angle\r\n  var scale = Math.round(Math.random() * 30) \/ 10 + 1;\r\n  var angle = Math.round(Math.random() * 360 * 100) \/ 100;\r\n\r\n  \/\/ create a new path (leaf)\r\n  var path = acgraph.path();\r\n\r\n  \/\/ color and draw a leaf\r\n  path.fill(fill).stroke(stroke, 1, 'none', 'round', 'round');\r\n  var size = 18;\r\n  path.moveTo(x, y)\r\n    .curveTo(x + size \/ 2, y - size \/ 2, x + 3 * size \/ 4, y + size \/ 4, x + size, y)\r\n    .curveTo(x + 3 * size \/ 4, y + size \/ 3, x + size \/ 3, y + size \/ 3, x, y);\r\n\r\n  \/\/ apply random transformations\r\n  path.scale(scale, scale, x, y).rotate(angle, x, y);\r\n\r\n  return path; \r\n};<\/code><\/pre>\n<p>You see that every path is created in the same way, but then gets transformed. This results in a very nice random leaves pattern.<\/p>\n<h4>Handling Events<\/h4>\n<p>Any object, stage and layer in GraphicsJS can <a href=\"https:\/\/docs.anychart.com\/latest\/Graphics\/Events\" target=\"_blank\" rel=\"nofollow\">handle events<\/a>. The full list of supported events is available in the <a href=\"https:\/\/api.anychart.com\/latest\/anychart.graphics.events.EventType\" target=\"_blank\" rel=\"nofollow\">EventType API<\/a>. Stages have <a href=\"https:\/\/api.anychart.com\/latest\/anychart.graphics.vector.Stage.EventType\" target=\"_blank\" rel=\"nofollow\">four special events<\/a> to control rendering.<\/p>\n<p>In this game example, we are using event listeners attached to the leaf objects so they disappear one by one when a user mouses over them. To do this, add the following code to the bottom of the <code>drawLeaves<\/code> function, before the <code>return<\/code> statement:<\/p>\n<pre style=\"background-color: #ffffff;\"><code>path.listen(\"mouseover\", function(){\r\n  path.remove();\r\n  counterLabel.text(\"Swiped: \" + leavesCounter++);\r\n  if (gameLayer.numChildren() &lt; 200) shakeTree(300); \r\n});<\/code><\/pre>\n<p>Here we can also see that we are using the layer to count leaves.<\/p>\n<pre style=\"background-color: #ffffff;\"><code>if (gameLayer.numChildren() &lt; 200) shakeTree(300); <\/code><\/pre>\n<p>Note that we are not actually storing the number of leaves here. As leaves are paths we add to and remove from a specific layer, this enables us to track how many children we have (and thus how many leaves remain).<\/p>\n<p>GraphicsJS provides a <a href=\"https:\/\/docs.anychart.com\/latest\/Graphics\/Virtual_DOM\" target=\"_blank\" rel=\"nofollow\">virtual DOM<\/a>, an abstraction of the HTML DOM, lightweight and detached from the browser-specific SVG\/VML implementation. It is useful for doing a lot of great things such as keeping track of all objects and layers, applying transformations to groups, and optimizing rendering with the help of methods that allow us to track and control the rendering process.<\/p>\n<h4>Performance Optimization<\/h4>\n<p>The virtual DOM, along with event handlers, allows GraphicsJS users to control rendering. The <a href=\"https:\/\/docs.anychart.com\/latest\/Graphics\/Performance\" target=\"_blank\" rel=\"nofollow\">Performance<\/a> article can give you an idea of the ways these things are related.<\/p>\n<p>When generating leaves in our game, we need to suspend rendering while adding new leaves and resume it only when all changes are done:<\/p>\n<pre style=\"background-color: #ffffff;\"><code>function shakeTree(n){\r\n  stage.suspend(); \/\/ suspend rendering\r\n  for (var i = 0; i &lt; n; i++) {\r\n    var x = Math.random() * stage.width()\/2 + 50;\r\n    var y = Math.random() * stage.height()\/2 + 50;\r\n    gameLayer.addChild(drawLeaf(x, y)); \/\/ add a leaf\r\n  }\r\n\r\n  stage.resume(); \/\/ resume rendering\r\n}<\/code><\/pre>\n<p>This way of handling new elements makes new leaves appear almost instantly.<\/p>\n<p>Finally, kick everything off with a call to <code>shakeTree()<\/code>.<\/p>\n<pre style=\"background-color: #ffffff;\"><code>\/\/ shake a tree for the first time\r\nshakeTree(500);<\/code><\/pre>\n<h4 id=\"theendresult\">The End Result<\/h4>\n<p class=\"codepen\" data-height=\"484\" data-theme-id=\"0\" data-slug-hash=\"NdLMgB\" data-default-tab=\"js,result\" data-user=\"SitePoint\" data-embed-version=\"2\" data-pen-title=\"GraphicsJS - street sweeper in the wind game\">See the Pen <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/NdLMgB\/\" target=\"_blank\" rel=\"nofollow\">GraphicsJS &#8211; street sweeper in the wind game<\/a> by SitePoint (<a href=\"http:\/\/codepen.io\/SitePoint\" target=\"_blank\" rel=\"nofollow\">@SitePoint<\/a>) on <a href=\"http:\/\/codepen.io\" target=\"_blank\" rel=\"nofollow\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h3>Conclusion<\/h3>\n<p>The shift to HTML5 has changed the Web. When it comes to modern web applications or even a simple site, we often encounter tasks that require image manipulation. While it is impossible to find a solution that works well in every situation, you should consider the GraphicsJS library. It is open-source, robust, has great browser support and lots of features that make it interesting, handy, and of course helpful.<\/p>\n<p>I would be happy to hear your feedback regarding GraphicsJS in the comments below. Are you using it already? Would you consider using it for a new project? I\u2019d love to hear why, or indeed why not. I am also currently working on a list of major JavaScript drawing libraries and an article that will compare and contrast them all. Also feel free to point me to any libraries you would like to see featured there.<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>GraphicsJS, our powerful JavaScript drawing library that we open-sourced last year, has recently got an update to version 1.2.0. It is the next\u00a0best news of 2017, a great addition\u00a0to winning\u00a0a\u00a0Devies Award with GraphicsJS for\u00a0the category &#8220;JavaScript Technologies&#8221; and to the 7.13.0\/7.13.1 releases\u00a0of our JS\/HTML5 charting solutions AnyChart, AnyStock, AnyMap, and AnyGantt. So, we invite you [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,168,23,13,3,4],"tags":[44,54,98,32,36,97,169,170,142,96,171,88,172],"class_list":["post-3054","post","type-post","status-publish","format-standard","hentry","category-charts-and-art","category-graphicsjs","category-html5","category-javascript","category-news","category-tips-and-tricks","tag-charts-and-art","tag-data-visualization","tag-graphicsjs","tag-html5","tag-javascript","tag-javascript-animation","tag-javascript-drawing","tag-javascript-drawing-library","tag-javascript-graphics","tag-javascript-graphics-library","tag-sitepoint","tag-svg","tag-tutorial","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint | AnyChart News<\/title>\n<meta name=\"description\" content=\"GraphicsJS, our powerful JavaScript drawing library open-sourced last year, has got an update to version 1.2.0. See what&#039;s new and an intro from SitePoint.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint | AnyChart News\" \/>\n<meta property=\"og:description\" content=\"GraphicsJS, our powerful JavaScript drawing library open-sourced last year, has got an update to version 1.2.0. See what&#039;s new and an intro from SitePoint.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-03T05:14:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-28T04:33:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg\" \/>\n<meta name=\"author\" content=\"AnyChart Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"AnyChart Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/\"},\"author\":{\"name\":\"AnyChart Team\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b\"},\"headline\":\"JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint\",\"datePublished\":\"2017-05-03T05:14:04+00:00\",\"dateModified\":\"2018-06-28T04:33:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/\"},\"wordCount\":1950,\"commentCount\":2,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg\",\"keywords\":[\"Charts and Art\",\"Data Visualization\",\"GraphicsJS\",\"HTML5\",\"JavaScript\",\"JavaScript animation\",\"javascript drawing\",\"javascript drawing library\",\"javascript graphics\",\"JavaScript graphics library\",\"sitepoint\",\"SVG\",\"tutorial\"],\"articleSection\":[\"Charts and Art\",\"GraphicsJS\",\"HTML5\",\"JavaScript\",\"News\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/\",\"name\":\"JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint | AnyChart News\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg\",\"datePublished\":\"2017-05-03T05:14:04+00:00\",\"dateModified\":\"2018-06-28T04:33:06+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b\"},\"description\":\"GraphicsJS, our powerful JavaScript drawing library open-sourced last year, has got an update to version 1.2.0. See what's new and an intro from SitePoint.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#primaryimage\",\"url\":\"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg\",\"contentUrl\":\"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b\",\"name\":\"AnyChart Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g\",\"caption\":\"AnyChart Team\"},\"sameAs\":[\"https:\/\/www.anychart.com\"],\"url\":\"https:\/\/www.anychart.com\/blog\/author\/andrey-khachaturov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint | AnyChart News","description":"GraphicsJS, our powerful JavaScript drawing library open-sourced last year, has got an update to version 1.2.0. See what's new and an intro from SitePoint.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint | AnyChart News","og_description":"GraphicsJS, our powerful JavaScript drawing library open-sourced last year, has got an update to version 1.2.0. See what's new and an intro from SitePoint.","og_url":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2017-05-03T05:14:04+00:00","article_modified_time":"2018-06-28T04:33:06+00:00","og_image":[{"url":"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg","type":"","width":"","height":""}],"author":"AnyChart Team","twitter_card":"summary_large_image","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"AnyChart Team","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/"},"author":{"name":"AnyChart Team","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b"},"headline":"JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint","datePublished":"2017-05-03T05:14:04+00:00","dateModified":"2018-06-28T04:33:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/"},"wordCount":1950,"commentCount":2,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#primaryimage"},"thumbnailUrl":"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg","keywords":["Charts and Art","Data Visualization","GraphicsJS","HTML5","JavaScript","JavaScript animation","javascript drawing","javascript drawing library","javascript graphics","JavaScript graphics library","sitepoint","SVG","tutorial"],"articleSection":["Charts and Art","GraphicsJS","HTML5","JavaScript","News","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/","url":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/","name":"JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint | AnyChart News","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#primaryimage"},"thumbnailUrl":"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg","datePublished":"2017-05-03T05:14:04+00:00","dateModified":"2018-06-28T04:33:06+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b"},"description":"GraphicsJS, our powerful JavaScript drawing library open-sourced last year, has got an update to version 1.2.0. See what's new and an intro from SitePoint.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#primaryimage","url":"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg","contentUrl":"https:\/\/dab1nmslvvntp.cloudfront.net\/wp-content\/uploads\/2017\/01\/1485753579GraphicsJS.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2017\/05\/03\/javascript-drawing-library-graphicsjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Drawing Library GraphicsJS 1.2.0 Released + Introduction from SitePoint"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b","name":"AnyChart Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g","caption":"AnyChart Team"},"sameAs":["https:\/\/www.anychart.com"],"url":"https:\/\/www.anychart.com\/blog\/author\/andrey-khachaturov\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/3054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=3054"}],"version-history":[{"count":44,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/3054\/revisions"}],"predecessor-version":[{"id":6239,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/3054\/revisions\/6239"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=3054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=3054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=3054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}