Join Ray Villalobos for an in-depth discussion in this video Getting to know EaselJS and CreateJS, part of EaselJS First Look.
- View Offline
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.
- 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