Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.


Reviewing how Canvas draws and animates

Reviewing how Canvas draws and animates provides you with in-depth training on Web. Taught by Ray Vi… Show More

EaselJS First Look

with Ray Villalobos

Video: Reviewing how Canvas draws and animates

Reviewing how Canvas draws and animates provides you with in-depth training on Web. Taught by Ray Villalobos as part of the EaselJS First Look
please wait ...
Reviewing how Canvas draws and animates
Video duration: 6m 3s 1h 28m Beginner


Reviewing how Canvas draws and animates provides you with in-depth training on Web. Taught by Ray Villalobos as part of the EaselJS First Look

CreateJS EaselJS

Reviewing how Canvas draws and animates

Before we get into how to create objects with EaselJS, it's a good idea to review how objects are drawn and animated with Canvas. If you're familiar with Canvas, go ahead and skip this movie and watch the next one. I'm starting out with a basic HTML template, so if you haven't already make sure you watch the video on creating a template as well as the one on installing EaselJS. Most of the time, we're not going to be using the index.html file, but we'll be working directly with the JavaScript document that's inside the underscore folder inside our JS folder.

Drawing shapes in Canvas is pretty easy, but Canvas has no concept of objects. As soon as you create something, it gets drawn into the Canvas and becomes a series of pixels. EaselJS is going make this a lot easier by creating a list of elements for you, but since we're using Canvas we're going to have to do this the old-fashioned way. Whether you're working with Easel or Canvas you're going to need to create a variable and point it to the Canvas element inside our HTML document. Right now that has an ID of Easel. With Canvas you also need to specify a context for drawing shapes with.

The context is we're going to provide a series of methods and properties to draw with. There is 2D as well as a 3D context available. For our example, we're going to use the 2D context. Once we have a context, we can draw on the Canvas by working with its methods and properties. So I'm going to start by changing the style of the fills in the context, and then I'm going to draw a rectangle. Using the Fill Style property we could specify a color as a string using either hexadecimal, RGB or even RGBA values.

We can draw a rectangle using the fillRect method which takes in a point of origin as well as a size. So I'm going to refresh my document and I just see a rectangle here. It has a point of origin at the top left of the Canvas or position 00, and has a width of 100 and height of 100. So I want to go ahead and center this rectangle on screen. So I'm going to create a couple of containers that are going to keep track of the size of this object as well as the center of the screen. Now we'll change the fillRect method to use these new variables.

And I'll Save this, refresh our document, now our rectangle is in the middle of our Canvas. Now with Canvas you can also rotate the context using the Rotate method. Rotation is not done with degrees but with radiance. That's a measurement system that is usually used by computers and mathematicians, but most people are going to prefer to work with degrees. To convert degrees to radiance we need to multiply them to Pi and divide them by 180. Let's say that you wanted to rotate the context by 30 degrees. You would do it like this.

Now I'm going to save this and let's see what happens. So I refresh the screen and nothing is happening, and that's because I'm rotating my context after I have drawn the rectangle. Remember, Canvas doesn't understand objects, so it doesn't know that this is a rectangle at all, it sees it as a series of pixels. So we can't rotate the rectangle after the fact. We have to put this before we draw the rectangle. Let's save this and refresh, and if you take a look at the results now it's probably still not what you expected. Remember, the context has no concept of objects. When you rotate the context, you're rotating everything.

The center of the rotation will always be at the top left of the screen. Let's go ahead and stroke our context so we can see what's happening. So when you use the Rotate method, remember that you're not only rotating the rectangle you're rotating the entire content or the entire context of the Canvas. To make it rotate properly you need to first change the registration point of the context that gets a little bit challenging with Canvas. We'll start by translating the context to the middle of the screen. It goes before a rotation.

So I'm going to Save this and refresh, and now you can see that at least the context now is rotating in the middle of the screen. The problem is that our square has been rotated out of view. We're going to change the position of the square so it sits at this new coordinate. So now our square is in the right position, but as we can see the entire context is out of whack. Anything we draw from now on will be in relation to our new transformations, which is not good. So let's check this out by drawing another square. We'll make this one a different color and smaller. So you can see transformations are sticky but there's a way to lock and unlock transformations with two methods, Context Save and Context Restore.

So let's refresh our document, Context Save is going to save the status of all our transformations, Context Restore resets them back. So now our second object is in the right place. So now we can get rid of our stroke. So animating in Canvas is done with the set interval method. So let's go ahead and add a set interval so that it lost across every 31,000th of a second. And we're going to wrap our drawing into this function. I'll go ahead and get rid of this other rectangle. We will need to also create a variable for our rotation and we'll need to increment the variable every time the function is called, and we'll also need to change our rotation function.

So now let's take a look at our animation. Now as the browser goes to this loop every 31,000th of a second, the objects are being drawn on top of each other. We're going to need to manually clear the screen and draw our objects each time. So let me refresh that you can see the rectangle is now rotating properly, so when you want to animate objects you have to clear the screen and redraw the objects every time from scratch, and that's one of the disadvantages of Canvas. You're going to see when we get into EaselJS, and that's one of the things that EaselJS handles really well for you.

If you want to learn more about drawing with the Canvas make sure you check out Joe Marini's HTML 5: Graphics and Animation with Canvas on the online training Library. When we draw with Canvas, we have to manage every aspect of drawing and transforming objects onscreen. When you work with EaselJS, you'll see how it takes care of these cumbersome tasks by providing you with a stage, a display list, and a timing function makes everything a lot easier.

There are currently no FAQs about EaselJS First Look.






Don't show this message again
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.

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.

Join now Already a member? Log in

* Estimated file size

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


You have completed EaselJS First Look.

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


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a Member and Create Custom Playlists

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

Get started

Already a member?

Log in

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:

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.

You started this assessment previously and didn’t complete it.

You can pick up where you left off, or start over.

Resume Start over

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about 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

Sign up and receive emails about and our online training library:

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

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.