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
Describing graphics with any programming language can yield very long files. EaselJS lets you combine methods together, so that complex objects can be described in a single line of code. It also lets you use shortcuts for some of the commands. Even the values within commands can be shortened and this is pretty exciting so let's take a look. I am starting off with a basic HTML template and a modified version of the end product of the video on defining lines and strokes, so make sure you take a look at that video if you need to understand how to define strokes and shapes.
So we have a graphic and a sequence of line commands. We can chain this together by putting all of the graphic commands one after the other. EaselJS is going to draw the graphic just fine. So what I am going to do is take this second graphic command and then delete the part that says shape.graphics and then attach it to the other command. So I am going to save and come over here and refresh, and you see that it still draws the exact same shape. As a matter of fact, I could just take all of these graphic commands and chain them one after the other to make my graphic fit in one line.
So I do that with all of these line commands and now our shape is all in one line of code. So I'll save this and I'll refresh, and you see it still draws the exact same shape. Now that's pretty cool, but that's not all. The graphic commands can also be condensed so that they are shorter. We can take a single command like beginStroke and just use the letter s. This is going to work with or without chaining, so the setStroke command becomes ss, moveTo command becomes mt, lineTo command becomes lt and others.
Most of the time, the shorter commands are going to be pretty easy for you to figure out. So let's check this out. Instead of begin stroke I can just use the letter s. Instead of setStrokeStyle I can just use ss, instead of moveTo I can just use the letters mt, lineTo becomes lt and closePath becomes cp. You see the shape is still drawn in exactly the same way. I can even take some of these defaults and convert into a numeric value.
So round is the second option, so it gets a 1, and this other round is also the second option, so that can get a 1 as well, and now an entire graphic fits within a very short line of code. You may want to go to the EaselJS documentation to find out what the default values for some of the commands are. So here for example on setStrokeStyle, you can see that you can assign values either by using names or also numbers. Chaining drawing commands lets you organize your graphics and makes it easy to copy and paste a single object.
Compacting the commands makes things a little bit shorter, but be careful because in their shortened form graphics are a little bit harder to read.