Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Installing EaselJS
- Understanding how Canvas draws and animates
- Drawing lines and strokes
- Drawing with graphic primitives
- Using the chaining and compacting commands
- Animating shapes
- Working with text
- Importing bitmaps and vector graphics
- Working with sprite sheets
- Handling mouse events
Skill Level Beginner
Now we can create a fill with a beginFill method. This is similar to modify the field of a Canvas context. Just like with Canvas we can pass along a string to the beginFill method. Now we're ready to draw a rectangle. But before I do that I am going to create a size constant that's going to keep track of our objects size. Now we can use that to draw our square. So once we've a Graphic object you can create Fills and draw your shape in a way that's super similar to Canvas. After you create a graphics element it has to be fed into a shape. A shape is what's going to allow us to make transformations in objects into our shape will pass along the graphics that we created.
Now that we have the shape and it has some graphics in it, we have to add it to the Canvas. To do this we use the Stage class. To the stage we will pass along our Canvas variable. Now we need to add a Shape as a child of the stage and then we need to update the stage. Updating the stage is what actually draws the elements into our canvas. So let me go ahead and save this and come over here and refresh, you ca see a rectangle at the top left corner of the Canvas. Now if you're doing a simple shape you can also create a graphic directly into your shape.
Shapes come pre-populated with a graphics object so you can use that to add shapes. So we'll get rid of this graphics variable right here and right here. And then we will grab these two lines and we will place them right after our shape. And we will take our variable shape and add it to the beginning of these two graphics calls. So I want to save this and refresh and you see this work just the same as before. So once you've a Shape you can modify how that shape is going to fit into the canvas. When you work with EaselJS you have to be careful about transformations and manage the saving and restoring of the context, because we are working directly with pixels.
Having a shape class and a stage class makes it easier for us to work with shapes. To center this on screen we can simply change its position in the canvas. So I'm going to create a couple of variables to keep track of the center of the canvas. And then I'll just to tell our shape to draw in the center of the canvas. Now this is going to be almost right. So I am going to save it and refresh. You can see that now the beginning of the shape is happening in the center of the canvas but it's drawing from that point on to the bottom right. To center this object we don't have to worry about saving our context and transforming and then restoring it, we can simply change the registration property that comes with all shapes.
So we go ahead and save this, and I'll refresh, and now you can see our shape is centered in the middle of screen. So that's really powerful. If you have ever had to work with the context in Canvas, you're going to love the way EaselJS handle shapes. As a matter of fact, the shapes you draw have lots of properties that are similar to what's available with Adobe Flash. Here's a page with details about shapes on the CreateJS website. Rotating element is pretty trivial with Easel. It's just a property of our shape like its position and registration point. Let's go a head and change the rotation to 30 degrees.
So here we're setting the frame rate to 30 frames per second. Now we add a listener for each tick. We could just call a separate ticker function and you'll see some examples on the web that do that, but that would require us to make some variables global. So we'll use a Function Literal instead. Inside this function we can simply modify the properties of our shapes as we wish. And we will need to update the stage as well. So I'm going to save this and refresh and you'll see the rectangle start to rotate. Now because you're setting up a rotation right here, you can get rid of this rotation and you can also get rid of this stage updating right here because it's updating 30 times per second. We'll delete some of these other spaces, Save and Refresh and it's working just fine.
Now we didn't have to worry about creating and incrementing a rotation variables since the properties are already initialized with some default values. Notice that the rotation is also already in degrees, so we didn't have to worry about converting from radiance. So there is a little the more setup involved when working with Easel, but drawing, transforming, and animating is definitely a lot easier.