The two.js JavaScript library provides us with the capability to create two dimensional drawings and animations.
The following code sample shows how simple it is to use this library. If you try to run this code on your end make sure you update the link for the underscore-min.js file.
<!DOCTYPE html>
<html>
<head>
<title>two.js demo</title>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>
<script type="text/javascript" src="two.min.js">
</script>
</head>
<body>
<div id="drawingarea"></div>
<script type="text/javascript">
var ob = document.getElementById('drawingarea');
var params = { width: 600, height: 400 };
var two = new Two(params);
two.appendTo(ob);
var circle = two.makeCircle(200, 100, 80);
circle.fill = '#DD99EE';
circle.stroke = 'red';
circle.linewidth = 4;
two.update();
</script>
</body>
</html>
The following video clip shows the execution of this code sample and explains it. You can find more video clips for learning how to use this library in my dedicated youtube playlist for two.js.
You can find more video clips, code samples and training material for learning how to use this library in my free (for personal use) Two.js Basics course at http://abelski.lifemichael.com.
