Sorry, your browser doesn't support Canvas.

Causal Graphics

On the left canvas, It illustrates how to create Shapes by using Graphics class in CasualJS Framework. The drawing methods follow the Graphics library in the AS3.

How to create Graphics?

The syntax is very similar to Graphics in AS3, for example:

//Normal rectangle
var rect = new Shape();
rect.graphics.lineStyle(2, "#fff");
rect.graphics.beginFill("#fc0");
rect.graphics.drawRect(2, 2, 100, 100);
rect.graphics.endFill();
stage.addChild(rect);

//It also supports chaining syntax:
var rect = new Shape();
rect.graphics.lineStyle(2, "#fff").beginFill("#fc0").drawRect(2, 2, 100, 100).endFill();
stage.addChild(rect);

Graphics APIs

  • lineStyle (thickness, lineColor, alpha, lineCap, lineJoin, miterLimit)
  • beginFill (fill, alpha)
  • beginBitmapFill (image, repetition)
  • beginLinearGradientFill (x0, y0, x1, y1, colors, ratios)
  • beginRadialGradientFill (x0, y0, r0, x1, y1, r1, colors, ratios)
  • endFill
  • drawRect (x, y, width, height)
  • drawRoundRect (x, y, width, height, cornerSize)
  • drawCircle (x, y, radius)
  • drawRoundRectComplex (x, y, width, height, cornerTL, cornerTR, cornerBR, cornerBL)
  • drawEllipse (x, y, width, height)
  • beginPath
  • closePath
  • moveTo (x, y)
  • lineTo (x, y)
  • curveTo (controlX, controlY, anchorX, anchorY)
  • clear