Start learning with our library of video tutorials taught by experts. Get started

EaselJS First Look

Comparing Canvas vs. EaselJS


From:

EaselJS First Look

with Ray Villalobos

Video: Comparing Canvas vs. EaselJS

Drawing with Easel JS is different from drawing with Canvas. The EaselJS Library creates several useful classes, methods and properties including a stage class for managing the context, a graphics class for drawing graphics, a shapes class for managing transformations, and a ticker class for managing time. So let's take a look. Starting off with a basic template so if you haven't already make sure you watch the video on creating a template as well as a one on installing EaselJS. I'm going to open up the javascript file and inside init function I am going to create a variable the points to the canvas in our HTML document.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
EaselJS First Look
1h 28m Beginner Sep 21, 2012

Viewers: in countries Watching now:

EaselJS is a free JavaScript library that makes creating interactive web content for HTML5 more straightforward and intuitive. This course transitions web designers, animators, and content creators who may be used to working with Adobe Flash and ActionScript to this new open web standard. Author Ray Villalobos first explains the capabilities of the EaselJS framework and the HTML5 Canvas element, and what they mean for web design. The rest of the course shows how to use EaselJS's helper classes and hierarchal display list to load images, draw, animate, and handle mouse input from visitors.

Topics include:
  • 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
Subjects:
Web Web Design Web Development
Software:
CreateJS EaselJS
Author:
Ray Villalobos

Comparing Canvas vs. EaselJS

Drawing with Easel JS is different from drawing with Canvas. The EaselJS Library creates several useful classes, methods and properties including a stage class for managing the context, a graphics class for drawing graphics, a shapes class for managing transformations, and a ticker class for managing time. So let's take a look. Starting off with a basic template so if you haven't already make sure you watch the video on creating a template as well as a one on installing EaselJS. I'm going to open up the javascript file and inside init function I am going to create a variable the points to the canvas in our HTML document.

We gave our canvas tab in ID of Easel so we'll point a variable there. Now with Easel you can add graphics with a graphics class. Notice that EaselJS uses a CreateJS namespace right before the call to the class and namespace is text that's added when you use the class to prevent JavaScript from getting confused when different libraries use different class names. This is something that just changes with the recent update to the library so you might see some examples on the web without a CreateJS namespace. If you're using Version .5 of the library or newer you should be using the new namespace notation.

Now we can create a fill with a beginFill method. This is similar to modify the field of a Canvas context. Just like with Canvas we can pass along a string to the beginFill method. Now we're ready to draw a rectangle. But before I do that I am going to create a size constant that's going to keep track of our objects size. Now we can use that to draw our square. So once we've a Graphic object you can create Fills and draw your shape in a way that's super similar to Canvas. After you create a graphics element it has to be fed into a shape. A shape is what's going to allow us to make transformations in objects into our shape will pass along the graphics that we created.

Now that we have the shape and it has some graphics in it, we have to add it to the Canvas. To do this we use the Stage class. To the stage we will pass along our Canvas variable. Now we need to add a Shape as a child of the stage and then we need to update the stage. Updating the stage is what actually draws the elements into our canvas. So let me go ahead and save this and come over here and refresh, you ca see a rectangle at the top left corner of the Canvas. Now if you're doing a simple shape you can also create a graphic directly into your shape.

Shapes come pre-populated with a graphics object so you can use that to add shapes. So we'll get rid of this graphics variable right here and right here. And then we will grab these two lines and we will place them right after our shape. And we will take our variable shape and add it to the beginning of these two graphics calls. So I want to save this and refresh and you see this work just the same as before. So once you've a Shape you can modify how that shape is going to fit into the canvas. When you work with EaselJS you have to be careful about transformations and manage the saving and restoring of the context, because we are working directly with pixels.

Having a shape class and a stage class makes it easier for us to work with shapes. To center this on screen we can simply change its position in the canvas. So I'm going to create a couple of variables to keep track of the center of the canvas. And then I'll just to tell our shape to draw in the center of the canvas. Now this is going to be almost right. So I am going to save it and refresh. You can see that now the beginning of the shape is happening in the center of the canvas but it's drawing from that point on to the bottom right. To center this object we don't have to worry about saving our context and transforming and then restoring it, we can simply change the registration property that comes with all shapes.

So we go ahead and save this, and I'll refresh, and now you can see our shape is centered in the middle of screen. So that's really powerful. If you have ever had to work with the context in Canvas, you're going to love the way EaselJS handle shapes. As a matter of fact, the shapes you draw have lots of properties that are similar to what's available with Adobe Flash. Here's a page with details about shapes on the CreateJS website. Rotating element is pretty trivial with Easel. It's just a property of our shape like its position and registration point. Let's go a head and change the rotation to 30 degrees.

I'm going to save this and refresh, and you can see it rotates around the registration point so you don't have to worry about saving and restoring the context like you do with canvas. Animation is also going to be a lot easier. As a matter of fact, Easel set things up rather nicely for you by creating a ticker class. This is a static class like the JavaScript Math class. So it doesn't need to be instantiated like a graphics, shape or stage classes. You simply access its properties and methods. So let's go and change the frame rate.

So here we're setting the frame rate to 30 frames per second. Now we add a listener for each tick. We could just call a separate ticker function and you'll see some examples on the web that do that, but that would require us to make some variables global. So we'll use a Function Literal instead. Inside this function we can simply modify the properties of our shapes as we wish. And we will need to update the stage as well. So I'm going to save this and refresh and you'll see the rectangle start to rotate. Now because you're setting up a rotation right here, you can get rid of this rotation and you can also get rid of this stage updating right here because it's updating 30 times per second. We'll delete some of these other spaces, Save and Refresh and it's working just fine.

Now we didn't have to worry about creating and incrementing a rotation variables since the properties are already initialized with some default values. Notice that the rotation is also already in degrees, so we didn't have to worry about converting from radiance. So there is a little the more setup involved when working with Easel, but drawing, transforming, and animating is definitely a lot easier.

There are currently no FAQs about EaselJS First Look.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed EaselJS First Look.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked