Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So what does EaselJS do? EaselJS provides an easy way to handle and manage a list of objects in the Canvas. HTML 5 Canvas by itself is excellent for drawing, but not for storing or animating existing objects. EaselJS gives you an easy way to access a list of items on the Canvas by creating a master stage that allows you to nest objects, so that you can easily access them. It adds access to input devices and makes it easier to deal with events like drag and drop or drawing on the screen.
If you're familiar with Adobe Flash then making the transition to EaselJS will be very easy, since the tool uses a similar approach. So let's take a look at how EaselJS works with the Canvas. The Canvas provides what's called an immediate drawing mode for graphics. When you create a Canvas object you're creating an area in which pixels can be drawn. This is really different than working with a traditional animation tool where you draw an object and tell the computer the beginning and ending points of how that object should move.
With Canvas you're not drawing objects, you're painting pixels. If you create a triangle and decide to move it you can't just tell Canvas to move it to a new position. You have to redraw the whole triangle at different positions in every frame. That means that programmers are in charge of managing objects onscreen. You have to calculate the X and Y positions of every point in a triangle as it moves across the screen. With EaselJS, you work in a routined drawing mode. It's like what you do in a Adobe Flash.
When you create an object, you tell Flash where that object should be and how it should animate overtime. EaselJS handles the drawing and updating of the Canvas for you. That makes it easier to build apps like games and animations. HTML5 Canvas is an amazing construct, but working with pure Canvas code can be really challenging. You're responsible for drawing objects as well as the stage for every frame in an animation, a tool like EaselJS makes it much more manageable.
Get unlimited access to all courses for just $25/month.Become a member
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.