Sorry, your browser doesn't support Canvas.

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:
  • name
  • id
  • x
  • y
  • regX
  • regY
  • width
  • height
  • scaleX
  • scaleY
  • rotation
  • alpha
  • visible
  • mouseEnabled
  • parent
  • stage

  • Methods:
  • getCurrentWidth ()
  • getCurrentHeight ()
  • getStage ()
  • localToGlobal (x, y)
  • globalToLocal (x, y)
  • localToTarget (x, y, target)
  • hitTestPoint (x, y, usePixelCollision, tolerance)
  • render (context)
  • toString ()