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
EaselJS lets you create fills in a way that is super similar to Canvas. There's ways to generate colors programmatically and options to create solid, linear, and radial gradients. So let's take a look. I am starting off with a basic HTML template. So if you haven't already, make sure you watch the video on creating a template and installing EaselJS. I am going to go to my script file and add a canvas variable that's going to point to our Canvas tagged in our HTML document that has an ID of easel.
So I am also going to add a stage variable. The stage variable is something that EaselJS uses to place objects. We will pass it along the canvas variable we just created. So the next thing you'll need to do is update your stage. That's going to draw any elements inside the stage. Right now, the stage is going to be empty, but let's go ahead and update it anyways. To place something on the stage, you have to create a shape using the shape class and add it as a child of the stage. The shape class allows you to animate elements on this stage.
It lets you set and animate properties in a way that's very similar to what's available with Adobe Flash. You can set properties like alpha, x and y position, registration, scale, and skew values. The shapes class is actually a child of another EaselJS class called the DisplayObject. So it inherits properties from that class. Here's a documentation on the shape class. You can see that it extends the DisplayObject and the DisplayObject is the parent class for shapes, text, and bitmaps, and they all share animation and transformation properties.
So right now we have a shape, but there is no graphics inside that shape. To add graphics, we are going to need to use the graphics class, and you've got a couple of options here. You can create a variable with the graphics class and then pass that along to your shape, or since the shape class already has a built-in graphics property, we can just add our shapes there. One of the advantages of EaselJS is that it comes with a rich library of graphic primitives, including the ability to create rectangles rounded rectangles, circles, and poly shapes.
We will be talking more about the graphic primitives later. In this movie, we are just going to add a simple rectangle. If you want to, you can also take a look at the documentation on the EaselJS website on the graphics class. So to draw a rectangle, we can use the fillRect or its clone, the rect method, and just type in a location, so an x and y position as well as a size. So right now this is not going to draw anything, because before we draw a rectangle we need to fill it with a color and we could do that with the beginFill method.
Through the beginFill method, we can pass a color as a CSS compatible color string. So we could use something like purple. This can be a name, a hexadecimal color in short or long form, an RGB, RGBA, HSL, HSLA value; pretty much anything you can use in CSS. So let's go ahead and save it and preview it over here and there is our shape. But sometimes you want to be able to generate the colors of an object programmatically. So EaselJS provides two methods of the static.graphics class.
So you can also call a color like this. So let's go ahead and save that and refresh, and we can see that we have the rectangle with now a different color. Now this looks a little bit weird and it's just the way that the fonts are formatted on my computer. If I pull this out, you can see that this is going on one line on the screen. So the getRGB function is going to return a color as a string and it's going to feed that into the beginFill method. So the getRGB method is nice, because this way you have access to the numerical values of your colors and therefore you can modify them programmatically.
The getRGB function is going to take three or four values. If you include a fourth value, it will generate an RGB color with alpha transparency. So we could type in here .5, save it, and refresh, and you can see that this color is now partially showing the gray and the background. There is also of course a getHSL function for generating colors with hue, saturation, and lightness. It takes three or four values like getRGB where the fourth value is the alpha transparency. So let's go ahead and save this and refresh and now we can see a different color.
Like with Canvas, Easel has a few methods for generating both linear and radial gradients. So let's take a look at linear gradients first. Colors is a list of colors inside brackets and separated by commas. Ratios is the beginning and ending position of the gradient within the shape as a number from 0 to 1, where 0 is the beginning of the shape and 1 is the end; .5 would then be in the middle of the shape. Then you specify two X and Y positions, first for where the gradient begins within the shape and then where it ends.
So it's easier if you look at an example. So let's take a look. So we will switch this to instead of be beginFill to beginLinearGradientFill. In brackets, we will specify an array of colors that we want to go from and to. We will just put in yellow and red to keep it simple. Then we will add the position of the two colors as another array and then we will add the direction of the gradient as two positions, so 0, 0 will be the top-left and a 100 by 100 will be the bottom right.
So let's go ahead and save this and refresh. You could see the gradient starts right here and it goes to here. Now you might be thinking that this part right here should be yellow, but the 0, 0 position of this gradient begins at the top-left position of the Canvas which is right here. So if a rectangle is 50, 50, then we would have to add 50 and 50 to the beginning position of the gradient fill. Then since this position right here, it's actually 150 pixels from the top-left of the Canvas, then we have to modify these two values to be 150 and 150.
And now our gradient looks great. So right now because the first origin is at X and Y position 50, the gradient is going to go from the top-left of this rectangle to the second position which is 150, 150 or the bottom-right of this rectangle. To make a horizontal gradient, we just need to modify the very end property right here. Now this is a horizontal gradient. To make a vertical gradient, we will just reverse these two values. We can add a color stop by adding another value to our list of colors.
Let's take a look at the options for a radial gradient. A radial gradient is nothing more than a gradient going from one circle to another. With a radial gradient you specify the colors in a list just like a linear gradient. The ratios are also a list of the relative position of the colors within the blend happening within these circles. So let's take a look. We will change this to beginRadialGradientFill, we will add our list of colors, we will add the relative positions of those colors, as well as the direction of the gradient.
Now here we are going to type in an X and Y position of one of the circles, as well as its size, as well as an X and Y position of the second circle, as well as a size. So I will position the first circle at X and Y, 100 with a radius of 0 and the second circle will be positioned at X and Y, 150 with a radius of a 100. Let's try the second circle at the same position. Usually, you end up doing the circles at the same positions with different sizes.
So basic fills are pretty straightforward and similar to the way you use fills with Canvas. EaselJS adds the getRGB and getHSL methods to make it easier for you to generate colors programmatically. Plus, it has a few methods for generating solid, linear, and radial gradients.