EaselJS experiments

Just playing with EaselJS. http://www.createjs.com/#!/EaselJS

HTML

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<canvas id='display' width='640' height='480'></canvas>

CSS

#display {
    border: 1px solid #000000;
    margin: 50px auto;
    display: block;
}

JavaScript

var stageWidth = 640;
var stageHeight = 480;

var stage = new createjs.Stage(document.getElementById('display'));



var rect = new createjs.Shape();

rect.graphics
.beginStroke("#000")
.beginFill("rgba(255,0,0,.3)")
.drawRect(0, 0, 42, 80);

stage.addChild(rect);

var skewed = new createjs.Shape();

skewed.graphics
.beginStroke("#000")
.beginFill("rgba(0,255,0,.3)")
.drawRect(0, 0, 42, 80);

skewed.skewX = -35;

stage.addChild(skewed);


stage.update(); 
createjs.Ticker.setFPS(40);
createjs.Ticker.addListener(tick);

function tick() {
    stage.update();
}