Multiply Defense - HTML5 Game Development - page 124

Objective complete - mini debriefing
One core class of the EaselJS library is DisplayObject . The DisplayObject class is a
base that displays graphics on the screen. It has several implementaions in EaselJS. The
Shape class, which defines vector shapes, extends DisplayObject . The Bitmap class,
which displays the bitmap image file, extends DisplayObject . The Container class is
DisplayObject that contains other display objects. The three display object classes are
shown in the following figure:

Display Object

Bitmap Shape Container

Drawing a shape with the Graphics object
If we draw with the naive canvas API, we can draw lines, rectangles, and arc curves.
However, we used the EaselJS library to take in charge of the canvas in order to benefit
from the game object's management. We need to draw via the EaselJS library. We can
use the Graphics class to draw shapes and atach them to the Shape class.

Here is an example that will show you how to draw a rectangle:

var g = new createjs.Graphics();
g.setStrokeStyle(style.strokeWidth)
.beginStroke(style.strokeColor)
.beginFill(style.fillColor)
.drawRect(0, 0, width, height);

Note that Graphics is not based on DisplayObject . It is usually atached to Shape to
represent the vector drawings:

var shape = new createjs.Shape(graphics);

If we create a new Shape instance without providing our Graphics object, the Shape
instance will create a new empty Graphics object for us:

var shape = new createjs.Shape();
shape.graphics
.setStrokeStyle(style.strokeWidth)
.beginStroke(style.strokeColor)
.beginFill(style.fillColor)
.drawRect(0, 0, width, height);