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

Start Your Free Trial Now

Transforming and animating shapes


EaselJS First Look

with Ray Villalobos

Video: Transforming and animating shapes

Transforming and animating shapes provides you with in-depth training on Web. Taught by Ray Villalobos as part of the EaselJS First Look
please wait ...
Transforming and animating shapes
Video Duration: 8m 24s1h 28m Beginner Sep 21, 2012

Viewers: in countries Watching now:

Transforming and animating shapes provides you with in-depth training on Web. Taught by Ray Villalobos as part of the EaselJS First Look

View Course Description

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
CreateJS EaselJS
Ray Villalobos

Transforming and animating shapes

Transforming shapes with EaselJS is done through a class called the DisplayObject. However, you don't actually access that class directly. Instead, you work with DisplayObject subclasses, like Text, Bitmap, and Shape. When you use one of these subclasses, you have access to a variety of traditional transformations, like Rotation, Scaling, et cetera. So let's take a look. So I'm starting off with a basic HTML template. If you haven't already, make sure you watch the video on Creating a Template and Installing EaselJS.

If we go to our script file, we notice that I have a canvas object, as well as a stage and a shape. There's already a shape in the canvas, so if you need to review how to draw graphics, make sure you check out the chapter on Drawing Graphics. So after you have a shape, you can apply some additional transformations to that shape by just calling the different DisplayObject methods. So I can do shape.rotation=, and I can use degrees for rotations, so let me type in 30, and I'll Refresh, and you can see that it's rotated; however, it may not be what you expected.

Like with canvas, rotation is done against a registration point, and that registration point is always by default at the top left of the stage. Now we can easily move that registration point with the regX and regY properties of DisplayObjects. Before I do that, though, transformations are more easily seen in an animation, so I'm going to add an animation. If you want to review how that's done, make sure you check out the video on Comparing Canvas versus EaselJS. So I'm going to rotate this object eight times through each tick, and then I'm going to update the stage.

So I don't need this stage.update right here, because the stage is going to be updated 30 times per second. I also don't need this rotation anymore, because I'm changing the rotation in every tick. So I'm going to Save and then Refresh, and you can more clearly see that, that rectangle is rotated around this point of origin right here, or this registration point. By making the origin of this object when we drew it, 50 and 50, we've actually moved the object 50 pixels from the left and 50 pixels from the top. So that object is already down a little bit into the stage.

So in order to fix this animation so that it happens around the center, we need to move the registration point of this object. So we're going to move the registration point to 100x100. So let me go ahead and Save. Now it is rotating around the center of the object. Let's go ahead and move this to another position in the stage. So you can see that we can reposition this object wherever we want just by changing the X and Y property. Now why was the registration set to 100x100? When we drew this object, we drew it at a position that was 50 pixels from the left and 50 pixels from the top, and then we told EaselJS that we wanted this object to be 100 pixels by 100 pixels.

Because we had already moved it, to make the registration point in the center of the object, we have to go 50 pixels in, plus half of the width of the object, so that's 50, plus another 50, so that's 100x100. Sometimes this notation can be a little confusing, so you've got a couple of options. Number one, you could set the original position of the object at the top left of the stage. If you do this, we'll Refresh, now the object is rotating around this point, because we've told it to go in 100x100 pixels.

You can come over here and change that to 50, 50, and this is half of the width of the object, the width and height are 100 right now, and if we Save that, then that works really well. If you don't want to use registration at all, you can just delete these two registration points, then automatically position the object so that it's centered already at the 00 point. That means the object will be at -50, -50, and be 100 pixels wide by 100 pixels tall. If I Save that, now the object rotates around the center and we don't need to use the registration commands.

So that's pretty cool! You can actually animate all the different kinds of properties of the DisplayObject, so make sure you check this documentation right here for some of the other options. You see that you have alpha; you also have stuff like regX and regY, the rotation is right here, plus you have a scale factor that you can adjust, as well as skewing and other things. So if you're used to using something like Adobe Flash, these properties will be very familiar to you. Let's go ahead and try some of them. So let's go ahead and move this object horizontally by 1 pixel every grain.

So I'll Save this and Refresh, you can see now the object is moving very slowly. So plus plus in programming languages means that you're going to increment this by 1 every time. So this is the same thing as writing shape.x = shape.x + 1. If you want to do more than one, then you can use +=, just like rotation, do += 5 pixels every time you would do that, so that's moving a lot faster. And the same thing for the Y. So just adjust the Y position by 5 pixels and rotate, and now you could see it moving diagonally.

Now you can also scale things in the X and Y direction by using scaleX and scaleY. A scale of .5 is half the size of the original object and a scale of 2 times is twice the size. So watch how you scale these. Let's go ahead and try some of those. I'll get rid of the position adjustment, so that's in the same place. Then I can come over here and say shape.scaleX = 2. Let's see what that does, and now the object is twice the width.

And I can do the same thing for Y with scaleY, and now the object is twice as big in every dimension. You can also do .5 to make it half as big, and you can tell that everything that EaselJS draws is in vectors, so it doesn't matter what size we make that object, it scales very nicely. You can animate that if you want to. So we could do something like multiply this by 1.1, and I'm going to Refresh, and you could see that it's growing a little bit through every frame of the ticker.

So another useful transformation is alpha. Let me go ahead and get rid of this, Save this, and Refresh. You can set the alpha of a shape by typing in the alpha property and sending it to a number from 0-1. So if we say .5, then the alpha will be 50% of whatever the color of the object was before. If we say 0, then the object will be completely invisible; and 1, completely opaque. So of course you can animate the alpha just like you can any other property. We can do something like times =.8, refresh that, and you can see the object kind of disappear.

So let's get rid of that so we can see our object. You can also skew a shape, and skewing is really an amount you want to skew an object by. So it's not a number from 1-0, like scale and alpha. You usually have to skew by a significant amount. So let's do shape.skewX = 200, and we could see that, that object is kind of skewed over to the side by 200 pixels. Let's go ahead and stop the rotation here, let's comment that out. And you can do the same thing in the Y direction. So if I wanted to animate that, I would do something like I will go ahead and keep the rotation and we'll Save that and we'll Refresh, and you can kind of get an interesting look and effect by skewing object. It's almost like a 3D effect when you combine skewing with the rotation.

You can also set the visible property of an object. Visible is sort of like alpha, so let's go ahead and set the shape.visible = 0. That means that the object is completely invisible. This is different than completely transparent. A transparent object will still be there and will still be drawn and you can click on it, whereas a visible object is not drawn at all, it's not there and you can't click on it, so that's an important difference between the two. Let's go ahead and turn that off.

So there's a few more options, and you should definitely check out the documentation on the DisplayObject to find out more information about this. So placing your graphics into shapes gives you the ability to access the properties of the DisplayObject. This is a powerful class that lets you perform all different kinds of transformations. Shapes are the EaselJS version of vector graphics. Unlike canvas, once you draw a shape, you can continue to animate it and transform it. This is one of the coolest features of EaselJS!

There are currently no FAQs about EaselJS First Look.

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 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 ?

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.

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.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

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.