Getting Started
Here's how to add JS3 to your project to quickly get started drawing and animating
1. First things first, add a canvas tag to your HTML and give it a unique id.
<body>
<canvas id="my-canvas" width="800" height="100"></canvas>
</body>
2. Include a link to the JS3 library right before your closing body tag.
<body>
<canvas id="my-canvas" width="800" height="100"></canvas>
<script src="https://raw.github.com/braitsch/js3/master/src/JS3-0.3.2-min.js"></script>
</body>
3. Initialize a new JS3 object and pass in the id of your canvas element.
<body>
<canvas id="my-canvas" width="800" height="100"></canvas>
<script src="https://raw.github.com/braitsch/js3/master/src/JS3-0.3.2-min.js"></script>
<script>
var stage = new JS3('my-canvas');
</script>
</body>
4. And that's it! You're now ready to start drawing and animating.
Here's a quick example of how to draw a red circle and tween it across the Stage.
<body>
<canvas id="my-canvas" width="800" height="100"></canvas>
<script src="https://raw.github.com/braitsch/js3/master/src/JS3-0.3.2-min.js"></script>
<script>
var stage = new JS3('my-canvas');
stage.background = '#CCC'
var circ = new JS3Circle();
circ.strokeColor = '#EEE';
circ.strokeWidth = 4;
circ.fillColor = '#9C0C0C';
circ.x = 25;
circ.y = 35;
stage.addChild(circ);
var tweenCirc = function()
{
circ.x = 25;
// automatically call tweenCirc again after the tween completes //
stage.tween(circ, 8, {x:840, onComplete:tweenCirc});
}
tweenCirc();
</script>
</body>