Join Ray Villalobos for an in-depth discussion in this video Reviewing how Canvas draws and animates, part of EaselJS First Look.
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.
- 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