<p><strong>Paper.js</strong> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.</p>



<p>Paper.js is based on and largely compatible with&nbsp;<a rel="noreferrer noopener" href="http://scriptographer.org/" target="_blank">Scriptographer</a>, a scripting environment for Adobe Illustrator with an active community of scripters and more than 10 years of development.</p>



<p>Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users.</p>



<p>Paper.js is developed by&nbsp;<a rel="noreferrer noopener" href="http://lehni.org/" target="_blank">Jürg Lehni</a>&nbsp;&amp;&nbsp;<a rel="noreferrer noopener" href="http://jonathanpuckey.com/" target="_blank">Jonathan Puckey</a>, and distributed under the permissive&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/license/" target="_blank">MIT License</a>.</p>



<h2><a>Getting Started</a></h2>



<ul><li>First of all, take a look at some of paperjs&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/examples/" target="_blank">examples</a>.</li><li><a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/download/" target="_blank">Download</a>&nbsp;Paper.js or check out the latest version from paperjs&nbsp;<a rel="noreferrer noopener" href="http://github.com/paperjs/paper.js" target="_blank">Github Repository</a>.</li><li>Want to learn Paper.js? Why not start now with one of our&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/tutorials/" target="_blank">Tutorials</a>.</li><li>If you have any questions or comments, please join the paperjs&nbsp;<a rel="noreferrer noopener" href="http://groups.google.com/group/paperjs" target="_blank">mailing list</a>.</li><li>To stay up to date,&nbsp;<a rel="noreferrer noopener" href="http://twitter.com/paperjs" target="_blank">follow paperjs on Twitter</a>.</li></ul>



<h2><a>Overview</a></h2>



<p>Paper.js is not simply a wrapper around the Canvas, it offers much more:</p>



<ul><li>A Scene Graph / Document Object Model for vector graphics: Work with nested layers, groups, paths, compound paths, rasters, symbols etc.</li><li>The handling and drawing of these graphic items is automatic and optimised, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.</li><li>A well designed and battle hardened Application Programming Interface (API).</li><li>PaperScript, a simple extension of JavaScript, allowing the scoped execution of scripts without polluting the global scope, the execution of multiple scripts per page in their separate sand-boxed scopes while sharing the library code, and adding support for operator overloading to any object.</li><li>There is a good reason for the word Vector in Vector Graphics. Paper.js treats Vector Mathematics as a first class citizen by making working with vectors and geometries as simple as possible through its core types such as&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/reference/point" target="_blank">Point</a>,&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/reference/size" target="_blank">Size</a>&nbsp;and&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/reference/rectangle" target="_blank">Rectangle</a>. The manipulation of&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/reference/point" target="_blank">Point</a>&nbsp;and&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/reference/size" target="_blank">Size</a>&nbsp;objects is further simplified in PaperScript, where direct math operations using normal operator syntax are possible on such objects as if they were plain numbers.</li><li>Construct paths and manipulate their curves and segments in very convenient and fine-grained ways.</li><li>Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with different stroke ends and miter limits.</li><li>Smoothen curves, and simplify path segments by fitting curves through points.</li><li>Simulate dashed strokes which are currently lacking from the Canvas object, at near native drawing speed.</li><li>Most blend modes known from Illustrator and Photoshop supported through emulation in JavaScript: multiply, screen, overlay, soft-light, hard-light, color-dodge, color-burn, darken, lighten, difference, exclusion, hue, saturation, luminosity, color, add, subtract, average &amp; negation.</li></ul>



<p>Read paperjs&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/tutorials/" target="_blank">tutorials</a>&nbsp;to learn more about the features of Paper.js.</p>



<h2><a>Browser Support</a></h2>



<p>Paper.js is aimed at modern browsers with support for the Canvas object and EcmaScript 5. Even though in theory it is possible to write code that works in older browsers (Yes Explorer 8 and below, we are looking at you!), paperjs currently do not support them out of the box. Let’s go forward!</p>



<p><strong><em>Credit goes to PaperJS@<a href="http://paperjs.org/">http://paperjs.org/</a></em></strong></p>

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Obj...

Paper.js — The Swiss Army Knife of Vector Graphics Scripting