Paper.js is an open source JavaScript library that provides us with vector graphics capabilities. Paper.js uses the HTML5 well known canvas.

The following code sample shows how simple it is to use this library.

<!DOCTYPE html>
<html>
<head>
    <title>paper.js demo</title>
    <script type="text/javascript" src="paper-full.min.js"></script>
</head>
<body>
    <canvas id="ourcanvas" resize></canvas>
    <script type="text/paperscript" canvas="ourcanvas">
        var path = new Path();
        path.strokeColor = 'red';
        var start = new Point(200, 200);
        path.moveTo(start);
        path.lineTo(start + [ 100, -40 ]);
    </script>
</body>
</html>

The following video clip overviews this code sample, shows its execution and explains it in detail.

You can find more training material for learning how to use this JavaScript library in my community free online courses at http://abelski.lifemichael.com.

Leave a Reply

Your email address will not be published. Required fields are marked *