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
Installing EaselJS is pretty easy. You have the option of using a CDN which is a Content Delivery Network, or if you have a GitHub account, you can clone to library repository onto your hard drive or you can just download a local copy. So let's take a look. To work with the library you need to go to the EaselJS site at this URL. You want to click on the Download EaselJS link and once you're there you have three different options for installing the library. The easiest way to work with EaselJS is to link to the CDN.
A CDN is a Content Delivery Network which means a website where master copies of the libraries are kept. This is considered the best way to work with libraries like EaselJS since if someone visiting your project has also visited another website that links to the same library, chances are that it will be cached and load faster on your machine. To use the CDN URL just select this link right here and copy it and then paste it onto your project. The second way to get the library is to clone the GitHub repository.
You can click on this link, if you have a GitHub account, this is a great way to keep your library current since it let's you stay synchronized with the project. Your third option is to download a copy of the files to your hard drive. Clicking on this link is also going to take you to GitHub where you can click on a link to download a zipped version of all the files. You don't need a GitHub account for this. When you download the library you'll see a folder with a lot of stuff. There's only one file you're going to need from here and it's in the lib folder.
You'll need the latest copy of EaselJS. Your version might be a little bit different from mine. And as a matter of fact because I know that EaselJS will be updating soon, I am going to use the beta Next version of EaselJS. I like to rename my Easel file just to be EaselJS. And then I'll go into my project and copy this into my JS folder. Now I will switch back to my text editor, and link to the file directly. I want to make sure I load this library before my script.js file.
We can see that it's right here in the js folder, in the underscore folder. So which of the three ways should you use? I would suggest using the CDN for your online projects. If you want to make sure you're always synchronized with the library, and you have a GitHub account, you might want to use the GitHub versions. During normal development, it's better to go with a local copy, that way you won't have to be connected to the Internet in order to use EaselJS.