Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 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
If you have got questions about how this works, make sure you watch the video on understanding basic fills and colors. So when drawing line segments, we first need to define the color of the stroke as well as its style. The stroke style is going to take one to four values. If we just include one value, it defines the thickness of the stroke. We will make our stroke 10 pixels wide. So once we have a basic color and a stroke style, we are ready to draw line segments. To create a line segment, we need to first move the position of our stroke to its starting position.
We will do that with the moveTo method. Once we set up the starting position of our line, we could make a line to another point by using the lineTo method. So I am going to save this and let's take a look at our line. Beautiful! To make a line to another point in the Canvas, we can use additional lineTo commands. I'll save that, refresh and now we have two line segments. We can leave the path open like this or close it if we want to. If you want to close the path, you don't have to make another line to the beginning, you can simply use the closePath method.
That will automatically close the shape. Let's take a look at the type of strokes that we can do. I have already shown you how to do a simple stroke color, but you can also do linear or radial gradients. This is a lot like linear and gradient fills, so if you already have experience of those, this will be pretty easy. Colors is a list of colors inside brackets and separated by commas like an array. Ratios is the beginning and ending position of the gradient within the shape as a number from zero to one, where zero is the beginning of the shape and one is the end; .5 would then be in the middle of the shape.
Then you can specify two sets of X and Y coordinates; first, for where the gradient begins and then where it ends. So let's take a look at an example. So we will modify this stroke to be a linear gradient stroke and we will start setting up our colors. We will just make this go from yellow to red. Then we will set up the starting and ending positions relative to shape, this would just go from the beginning to the end. Then we can set up two sets of X and Y coordinates for where the gradient will begin and where it will end.
This is relative to the canvas. So we will do 50, 50, that's pretty much at the top of this triangle right here. And then we will go down to 250, 250 and that'll be this point in the triangle. So we will save it, hit Refresh, now you can see that the gradient is going from this position to this position. Radial gradients are pretty similar to linear gradients except that you're using the shape of two circles and blending in between those two circles to specify the colors.
But first you begin with a list of colors just like with linear gradients then a list of ratios just like with linear gradients, but you then specify an X and Y position for your first circle, and then a radius for your first circle, and then you specify an X and Y position for your second circle, and then a radius for that. EaselJS is going to blend between those two circles. So let's take a look at how that works. We will change this to be a radial gradient stroke, we will leave the colors alone and the positions as well.
Now we need to specify the X and Y positions plus the radii of two circles. So you usually make the X and Y positions of the circles the same. So we will make them both 50 and 250 and we will give this first circle a radius of 0, and then we will make the second circle be at the same position, 50 and 250. And we will give it a radius of 250. 50 and 250 is at this point right here, so I am going to save this and refresh, and you can see that now the gradient starts from right here and it goes out towards the edges.
So EaselJS is going to give us a few options for modifying how our strokes look. In addition to the thickness, you can specify how the line endings will get drawn as well as the points. SetStrokeStyle will take more than just the thickness, it can also take a value for the caps which can be butt or the number 0, round or the number 1, or square or the number 2. So you can either use the numbers or the names. The joints are where two lines meet, you can make that miter, round or bevel, again the numbers at 0, 1, or 2, where zero is the default and if you set a joint to miter, then the miter value is a number that specifies where the miter will be clipped.
So let's take a look at how that works. Before we modify the stroke style, we need to go ahead and leave the path open. So let me go ahead and delete this line right here that closes the path and then I will save and refresh, so we have now an open path. So then we can modify the shape of the endpoints by typing a different value right here. So we will specify round edges on the corners of the shapes. So when I do that, you see now that this shape has round edges at the ending of the line segments.
You can control the shape of where the segment meets by adding in another value right here. And now this has a round joint. Remember, you can also use numbers instead of these names, so this is the same thing. There are some other options for drawing curves to points. You don't have to use lineTo. You can use quadric curves and Bezier curves. So let's go ahead and draw a quadratic line to our second point. So instead of lineTo, we are going to use a quadraticCurve and give it four values.
So this is going to create a line that's a little bit curved to this point. A quadraticCurve is really just two sets of coordinates one of which controls the curvature that defines our line. You can play around with some of the other ways of drawing and take a look at the EaselJS documentation for different ways of drawing lines. You're probably going to end up drawing things in other programs and importing them when your lines get a little bit complicated. So EaselJS gives you a lot of options for drawing different lines, as well as ways to control the color or gradients used to display those lines.