Duration: 16 minutes
Summary: In this video, we will learn about the canvas. We will see how we can save at a certain point and restore to it and we need to. That way, we don’t have to redraw some of the elements. We do this by using the save and restore functions of the context. The second part of this video will discuss animation. We will start an animation (using the setInterval function) that will animate every second. Then we will clear the animation using the clearInterval function. Along the way, we will manipulate the values in the setTransform function (discussed in the previous video). These values end up being animated every second and we will see how that displays within the canvas.
Technology Used: HTML 5 and Visual Studio 2010
Keyword: HTML 5, Visual Studio 2010, canvas, width, height, document, getElementById, getContext, beginPath, fillText, font, save restore, setInterval, clearInterval.
Welcome back, everyone. This is Ayad Boudiab. I'm a Senior .NET Application Developer.
We're proceeding with our canvas discussion of HTML 5. We did a few videos before and
discussed rotation, scaling, transformations, imaging, and how we can create patterns, and
such. As you notice here, I commented the code already, so we can proceed with the rest of
the discussion. I'm going to attach this file to the video, so you can download the code, and
uncomment the one you need, so you can test them. Down here, there's a few things I'd like to
discuss before I proceed to the animation video. The part that I'd like to talk about is being able
save and restore the context. I can get to a certain point and need to save that, and do some other
point, then restore back to that point and proceed. That's very helpful in many situations, because
if you don't have it, you'll have to redo work to get back to that point. So, saving and restoring
will save you a lot of work.
To illustrate this, I'm going to first draw some text, then set some transformations, then do
some more text. Let's go ahead and start with the context and font. Make that 15 point, and
let's make that Calibre. This is the font that I set over here. The next thing is to fill some text.
So, "context.filltext." I need to choose the text I need to put in here. That will be HTML5
training. Then, I'm going to put that at location 100, 100. You've seen this. We fill some text at
a certain location, using a certain font. Now, what I need to do is "context.save." Save it to this
point, then move on and do some other work. For example, I'll go to "context.settransform." I'm
going to set the transform, then add some values, here. The values I'm going to enter are 1, -0.2.
I already discussed that in a previous video and showed you ab applet on how these values can
change. If you want to learn more check out the previous video where I discussed that function.
So, "context.settransform." I'm going to set that with the values that you see. 1, -0.2, .02, 1, 0,
0. Then, I'm going to set the font here. "context.setfont." I'm going to set the font to be 25 point,
in New Roman. That should take care of the font. Sorry, this one should be equal to. It's not a
So, we set the font, and fill some text. So, "context.filltext." This text would be as follows.
This would be at location 200, 200. Down here, I'm going to restore to that point. Notice what
happens here. Font, fill text, save that location. I changed the transform, then font, then fill
text. By the way, let's save that for a second, and preview it before I restore. So, I have HTML5
training and Mr. Bool, with the transform that I just specified. Right? Now, if I proceed, anything
I do should be using that transform. Well, that's not the case, because I'm going to restore to the
way this was, then proceed. So, I'm going to say "context.restore." It restores to the last saving
point, which is over here.
After the restore, I'm going to do some font, and some fill text. Here's some font, and some fill
text. Set the font to 15 point Calibre. Was this affected by the transform at location 10, 300? Let's
save, then preview that in the browser. You'll notice that this one was using this font. This one
was transformed. Then, it went back to the way it was earlier. So, what happened was that we
saved at the location, work, work,work here, then restored to that saving point as if these were
not affected by that transform. It's as if you're rolling back to that other point, and then doing the
other work. This is not affecting the way you're filling out the text. You're not doing anything
with this type of transform. So, that's how we save and restore when we need to work with the
Now, let's go back to another concept and see how we can do some animation. Let's go ahead
and add a new page. Let's call this one "Canvas Animation." That's an HTML page. This one
would say "Canvas Animation." Add it. Now, I'm going to go back to the previous page, copy
everything, paste it here. Let's go up to all these commented lines and remove those. Keep
removing them. I don't want them. Even the latest ones we've done, I don't need those either.
So, what do I have here? I have Doc. type HTML. Language. Experimenting with the canvas,
and here, we'll say animation. Let's keep the box as it is. Box shadow, with insets and black
color. We have a reference to the jQuery library, using the Google API. Then, I have the actual
and height, nothing changing there. Then, in here, it says "c.getcontext."
The next thing I want to do is try to apply some animation into what we've done. So, let's go
ahead and do this. The first thing I want to do is cut some text here. Outside the jQuery function,
I'm going to declare some variables. I need a variable named "I." I'll show you why shortly. And,
another variable named "X," with a value of 0. I need those variables to apply for the whole
script. That's why I declared them outside the function. Then, underneath the jQuery function,
I'm going to declare another function that does some work. "Function." Let's call it "Do Work."
The function is supposed to get some work done, but it also needs the element. It needs the
canvas. So, I'm going to take this piece, cut it from here, and place it inside the function. So,
right here, inside the "Do Work," I'll be able to get the element by ID name "My Canvas." If
I get the context, if it actually exists, I'm going to retrieve my 2D context, and start drawing.
When I get the context, I'm going to set the transform, the font, and the text. So, the context we
usually work with we've seen before. I'm going to set the transform and apply some values. The
values I'm going to apply here are dynamic values. They're not static. I'm going to show you
that shortly. Let's set the context and the font. Make the font 25 point New Roman. That's the
font I want to use. I'm going to do "context.filltext." The text I'm going to fill is Mr. Bool, again.
That would be at location 0, 400. If this is back to Paint, this is the canvas. Let's start a new file
and save. This is the box, this is the 400 x 400 canvas. I'm going to display Mr. Bool at location
0, 400. 0 on the x, 400 on the y, which is the max of the canvas, so it's going to be starting
somewhere over here. That's where I'm going to display it. This is the original value. Going back
to the text, I fill out the text with "context.settransform," "context.setfont," the 25 point New
Roman, and "context.filltext" at 0, 400. Right underneath, do you see the x value I declared at
the top, being 0? I'm going to increment that by .1. So, "x less or equal to 0.1" It's incrementing
every time. I'll show you in a minute why I need this.
Going back to the function. When the function is ready, I'm going to use a set interval. That
function will call a certain function at an interval. For example, every second, half a second,
whatever you choose. So, I'm going to say "Setinterval," and whatever expression I want to
execute. In this case, I want to call "Do Work" every second. Since it's in milliseconds, it's
going to be 1000. So, "setinterval" is going to call "Do Work" every second. Down here, when
I increment, I need to get to a certain point where I want to stop. I don't want it to keep calling
every second, forever. I want it to stop at a certain point. So, I'm going to say if x is great than
0.9, because if it gets to 1, I don't want to go any further, since the values for "settransform" are
in that range. So, if x is great than 0.9, I'm going to alert the user with something like "Done."
Then, I'm going to clear the interval. "Clear interval" takes a handle.
So, clearing what interval? This is why I declared the variable "I," which will hold onto
the interval, and clear it when it needs to. So, instead of simply calling "Set interval," we're
going to say "I=setinterval." It keeps a handle on this interval. When it goes down here and
says "clearinterval," we're going to clear I. That's the handle for that specific interval. So, the
function "Do Work" will get the canvas, get the context, make sure it exists, retrieve that 2D
context, set the transform, which I'll be back to shortly, change the font, fill the text, increment
by 1, and if x is greater than 0.9, it doesn't clear the interval. So, we get over here and set the
interval every one second, and call this method. Next second, call this method. Increment x by .1.
When it's greater than .9, it's going to clear that interval. Now, the "settransform" takes A, B, C,
D, E, F. The values I want to pass to "set transform" I'm not going to give you static values. I'm
going to give you some values I have for x. So, next time x comes in as .2, it's going to be .2. .3
is going to be .3, and so on. The next value for this would be -x, then x, then x, again. These are
the values for A, B, C, D, and I still have E and F. E would be 20 + x, and F would be 20 - x. So,
I'm dynamically changing those values every second I call this function. That's the plan. That's
what we're trying to do.
Let's give it a shot and see how that work. Save it. View in the browser. Canvas shows up, and
you see Mr. Bool start showing up. Then, it's done. This is happening every second because you
set the interval to every second, and the transform would be those dynamic values. Of course,
this is a simple example. You can do fancier examples using "set transform." Like I showed you
earlier, when it comes to the actual values that you can manipulate through the matrix. So, this
is about the canvas. There are other videos we'd like to discuss later. So, please stay tuned to the
Mr. Bool website. Thank you, very much, for listening. I'm Ayad Boudiab. You have a good day.