Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Reviewing how Canvas draws and animates

From: EaselJS First Look

Video: 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.

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 lynda.com 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.

Show transcript

This video is part of

Image for EaselJS First Look
EaselJS First Look

21 video lessons · 4850 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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