Making and Animating Graphics - Beginning HTML5 Games with CreateJS - page 18

Figure 2-1. Square drawn with the Graphics API
Now that your graphic is in a display object, you can add it to the stage and move it around appropriately.
Any instance of Shape will have a Graphics instance named graphics , whether you pass one in through its
constructor or not.
You can alternatively create graphics and display them via Shape objects by directly accessing its graphics
property, as opposed to passing a new instance into it. The following code demonstrates how you can use this
approach by creating a semi-transparent screen that covers the entire stage:
var screen = new createjs.Shape();
screen.graphics.beginFill(createjs.Graphics.getRGB(0, 0, 0, .6));
screen.graphics.drawRect(0, 0, stage.canvas.width, stage.canvas.height);
stage.addChild(screen);
Notice that you can control the transparency of any color by using the getRGB static method, allowing you to also
specify an alpha property. You'll also notice that the stage itself doesn't have any properties specifying its size so you
access its width and height via its canvas property, which is a reference to the HTML Canvas element that it is tied to.
Let's take a look at some of the other shapes that you can quickly build via the Graphics class (see Listing 2-2).
The shapes are shown in Figure 2-2 .
Listing 2-2. Various Shapes Drawn with the EaselJS Graphics Class
//RECTANGLE
var rectangle = new createjs.Shape();
rectangle.graphics.beginStroke('#000');
rectangle.graphics.beginFill('#FF0000');
rectangle.graphics.drawRect(0, 0, 150, 100);
rectangle.x = rectangle.y = 20;
stage.addChild(rectangle);