In this chapter, we are going to talk about working with basic objects and events in CreateJS and EaselJS. After learning about these topics, you can work with basic methods and functions in CreateJS to create your shapes, and control them using events.
We are going to discuss the following topics:
- Exploring CreateJS
- Working with APIs
- Methods and events
EaselJS is one of the main CreateJS modules, which enable developers to work with Canvas elements. To work with EaselJS, we need to have a canvas element, so all shapes can be rendered into this area. After creating an instance of Stage class, we need to add displayObject to the Stage class. EaselJS supports the following features:
- Bitmap: This is used for the images.
- Shape and Graphics: These are used for the vector graphics.
- SpriteSheet and Sprite: These are used for the animated Bitmaps.
- Text: This is used for the simple text instances.
- Container: These hold other DisplayObjects.
- DOMElement: This is used to control the HTML DOM elements.
When the Stage object wraps the canvas element, all shapes and text appear in the Canvas element.
Note
For more details, check the EaselJS documentation at http://www.createjs.com/Docs/EaselJS/modules/EaselJS.html.
Let's go through an example of creating a basic shape in EaselJS. Here, we have a canvas element with a specific height and width:
<canvas id="demoCanvas" width="500" height="200"></canvas>
CreateJS has a Stage method, which accepts a canvas element in the first parameter, and we should pass the ID of our canvas element to it:
var stage = new createjs.Stage("demoCanvas");
We now have a stage for our canvas element. In the next step, we need to create a shape:
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100; Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
In the first line, a circle variable is created. It contains the Shape object from EaselJS. All Shape objects have a graphics property.
In the next line, we fill it with the color red using the beginFill method, and then in the line after that, we create a circle with the drawCircle method. The drawCircle method has three parameters; the first two parameters are used for positioning the circle (x and y axis values) and the last parameter is the radius in pixels. Thus, we have created a circle with position 0 (relative to the shape's position) and radius 50.
EaselJS supports method chaining, we can call all functions one after another, just as we have seen in our previous example of creating the circle and filling in the background color.
After creating the Shape object, we need to add it to our stage object and also update the stage as follows:
stage.addChild(circle); stage.update();
Keep in mind that after adding child (shape, circle, and so on), we have to call the update method from the stage object to update the stage; otherwise, the code will not run properly and we will not get the desired result. You can see the result of our simple code in the following screenshot:
