Getting to know EaselJS and CreateJS

show more Getting to know EaselJS and CreateJS provides you with in-depth training on Web. Taught by Ray Villalobos as part of the EaselJS First Look show less
please wait ...

Getting to know EaselJS and CreateJS

Before we get started working with EaselJS, let's take a minute to discuss what it is and how it relates to HTML5's Canvas. EaselJS is part of a group of JavaScript libraries called CreateJS. The libraries can help you build interactive experiences by providing functionality on top of HTML5. That makes it easier to do things like animation, tweening and working with sound. The libraries can be used as stand-alone modules or worked together to help you build powerful applications and includes EaselJS, TweenJS, SoundJS, PreloadJS and Zoe.

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.

Getting to know EaselJS and CreateJS
Video duration: 2m 46s 1h 28m Beginner


Getting to know EaselJS and CreateJS provides you with in-depth training on Web. Taught by Ray Villalobos as part of the EaselJS First Look

CreateJS EaselJS
please wait ...