Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,971 courses, including more Web and personalized recommendations.
Start Your Free Trial Now Overview
 Transcript
 View Offline
Released
9/21/2012 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
Duration
Views




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 anticlockwise 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.



Public Link
Video: Drawing with other graphic primitives