EaselJS is a free JavaScript library that makes creating interactive web content for HTML5 more straightforward and intuitive. This course transitions web designers, animators, and content creators who may be used to working with Adobe Flash and ActionScript to this new open web standard. Author Ray Villalobos first explains the capabilities of the EaselJS framework and the HTML5 Canvas element, and what they mean for web design. The rest of the course shows how to use EaselJS's helper classes and hierarchal display list to load images, draw, animate, and handle mouse input from visitors.
EaselJS has methods for drawing rectangles just like Canvas, as well as methods that make it easier to draw things like circles, rounded rectangles or polygons and stars. 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 JS. I have done a lot more prep on my JavaScript file, so I have already set up my canvas and stage variables. I have also set up some basic strokes for the graphics we are going to create. So make sure you watch the movie on defining lines and strokes.
EaselJS gives you two methods for creating rectangles; you can create regular rectangles or rectangles with rounded edges. For all rectangles, you specify the beginning X and Y positions as well as a width and a height. For round rectangles, you can either specify a radius for all borders with the drawRoundRect method, or the radius of each edge with the method called drawRoundRectComplex, so let's take a look at a few examples. First, we will draw a simple rectangle. We could use the drawRect method or its clone which is just the Rect method, they are exactly the same.
So the first two points are the X and Y point of origin which is right here. And the next two points are the X and Y ending points which are right here. So if we want to draw a round rectangle, we need to use the drawRoundRect method. We will have to put in an additional value for the roundness of the round edges. So we will put in the value of 50 and then refresh and you can see that all the edges are now a lot smoother. So for more complex round rectangles, you can specify each corner radius separately.
And we'll save that, refresh, you can see that each corner is set differently. So these methods are really big timesavers of how you would do this if you were using regular canvas. There are also a few methods for making circles and arcs. They all take a single point of origin and with drawCircle you include a radius that is the distance from this origin to draw the graphic. Ellipses are more like rectangles, they take a width and a height instead of a radius. Arcs are how you would build a circle with regular canvas, it works pretty much like its canvas cousin, specify a point of origin, then a radius for this circle and then you create a beginning angle position.
Angles start to the right of the origin at position zero and go clockwise from the starting angle position to the ending angle position. You can reverse the direction of the arc, but this is not as clear as you may think. So we are going to have to take a look at some examples to make sure we understand this. One more thing, the angles are in radiance, so if we want to specify degrees we are going to need to convert. So let's take a look. So drawing a circle is pretty easy, you use the drawCircle method and you specify a point of origin as well as a radius.
So ellipses are like a combination between a circle and a rectangle. They get a point of origin and a width and height that determines the radii of the ellipse. Arcs are probably the hardest to understand and that's because it's actually a copy of the arc command from Canvas. You usually use the arc command to create ellipses and other shapes. That's why this method is not often used with EaselJS. So we usually start with a point of origin and then a radius like a circle. We are going to specify two angles, the beginning and ending angle, and the angles are going to be in radiance.
So let me just show you an example. The first is the point of origin, then a radius like a circle, then we are going to specify two angles; the beginning and ending angle. The angles are in radiance so if you need to convert them to degrees, you are going to have to use Math.PI/180 as a multiplier. Angle 0 is going to be to the right of the point of origin. And the default direction is clockwise. This may not be what you expected. Since the default direction of the arc is clockwise, if we want the direction to go the other way, you might be thinking you could type in a negative value for the second angle.
So I will save this and reload and now it's going all around in a clockwise direction instead of going from here to here, which may be what you wanted. In order to change the direction, you are going to need to add an additional value, the scarily named anti-clockwise Boolean. So I'll add a number 1 right here and then hit Save and Refresh, and now our angle goes in a counterclockwise direction. You rarely end up drawing arcs since the primary reason to do so is to draw circles and ellipses and EaselJS provides two super simple methods for that.
So let's say you need a polygon like a triangle or a pentagon, or you need to draw some stars or starbursts, enter the very handy PolyStar method. This is similar to drawing a circle. We start off with the origin and then the radius plus the number of sides you need for the shape. The pointiness is a value from 0 to 1, where 0 draws regular polygons, 1 draws spikes and anything in between draws starbursts. This is going to clear up when we do an example. Finally, the angle is a starting position of the first point or corner.
This is a little hard to see especially with a complex starbursts. So let's check out some examples. So I am going to save this and refresh. And we probably want to change the StrokeStyle to be round at the corners and the edges. So save that, refresh and there you go. So the first three values are pretty easy to visualize, the X and Y position of our poly shape. The next value is going to be the number of sides. So the first three values are pretty easy to visualize, think of them as the X and Y position of a circle and then a radius.
The next value is the number of sides, in this case 5. So let's make this more of a starburst by adding more points. To understand the next value, it's good to think of a starburst as being two circles, one for the inside spikes and one for the outside spikes. At a pointiness value of 1, the inner circle is smack in the origin of the graphic and becomes super spiky. So let's modify this value of pointiness to 1, save it and refresh. You can see that this is pretty much a bunch of spikes.
If we make his value zero, then the inside circle is the same size as the outer circle. And it's no longer a starburst. Save it and refresh and now you can see that it's a polygon. So the last value is the angle position of the first point. It's really tough to see with so many points. So let's go ahead and make this a triangle, save it and refresh, and you can see now that it's pointing to the right. This is sort of a weird position for a polygon so if you want to make sure it points up, then just change the angle to -90.
And it's kind of nice that it's also in degrees. Now you can see the polygon is pointing up. So EaselJS gives you a lot of methods for drawing graphics that are going to save you a lot of time when building common objects.
There are currently no FAQs about EaselJS First Look.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.