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 method call.
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 context.
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.