<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 href="http://scriptographer.org/" target="_blank" rel="noreferrer noopener">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 href="http://lehni.org/" target="_blank" rel="noreferrer noopener">J&uuml;rg Lehni</a>&nbsp;&amp;&nbsp;<a href="http://jonathanpuckey.com/" target="_blank" rel="noreferrer noopener">Jonathan Puckey</a>, and distributed under the permissive MIT License.</p>
<h3>Getting Started</h3>
<ul>
<li>First of all, take a look at some of paperjs <a href="http://paperjs.org/examples/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">examples</a>.</li>
<li><a href="http://paperjs.org/download/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Download</a>&nbsp;Paper.js or check out the latest version from paperjs&nbsp;<a href="http://github.com/paperjs/paper.js" target="_blank" rel="noreferrer noopener">Github Repository</a>.</li>
<li>Want to learn Paper.js? Why not start now with one of our <a href="http://paperjs.org/tutorials/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Tutorials</a>.</li>
<li>If you have any questions or comments, please join the paperjs <a href="http://groups.google.com/group/paperjs" target="_blank" rel="noreferrer noopener">mailing list</a>.</li>
<li>To stay up to date, <a href="http://twitter.com/paperjs" target="_blank" rel="noreferrer noopener">follow paperjs on Twitter</a>.</li>
</ul>
<h3>Overview</h3>

<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 href="http://paperjs.org/reference/point" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Point</a>,&nbsp;<a href="http://paperjs.org/reference/size" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Size</a>&nbsp;and&nbsp;<a href="http://paperjs.org/reference/rectangle" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Rectangle</a>. The manipulation of&nbsp;<a href="http://paperjs.org/reference/point" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Point</a>&nbsp;and&nbsp;<a href="http://paperjs.org/reference/size" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">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 href="http://paperjs.org/tutorials/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">tutorials</a> to learn more about the features of Paper.js.</p>
<h3>Browser Support</h3>

<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&rsquo;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