Causal DisplayObject
On the left canvas, It illustrates how to create display objects by using DisplayObject class in CasualJS Framework.1) Initialize a stage for canvas
Like AS3, everything goes from stage. To use CasualJS, you need to create a stage first.//Create a stage, bind to a context
var stage = new Stage(context);
stage.setFrameRate(20);
2) Add display objects to stage
Yes, it's so familiar for you to use addChild() method to add display objects to stage.//add a shape with a rectangle and a circle to stage
var shape = new Shape();
shape.graphics.lineStyle(1, "#ffffff");
shape.graphics.drawRect(0.5, 0.5, 100, 100).drawCircle(150, 1, 50);
shape.x = 200;
stage.addChild(shape);
3) Add display containers to stage
Typically, you can use Sprites as display containers which has display children.//add a sprite as a display container to stage
var container = new Sprite();
container.x = 20;
container.y = 20;
stage.addChild(container);
4) Listen ENTER_FRAME or MOUSE events
CasualJS provides a basic event mode for handling interactions, the syntax follows AS3 events library.stage.addEventListener(StageEvent.ENTER_FRAME, enterFrameHandler);
stage.addEventListener(StageEvent.MOUSE_DOWN, mouseDownHandler);
DisplayObject APIs
Properties:Methods: