Duration: 16 minutes
Summary: In this video, we will continue our discussion of canvas. We have already seen how to get the canvas element and the context. Having that ready we were able to do some drawings. Here, we will take this a step further and see how we can do some rotating, scaling and translating. Before that though, we will create a pattern using an image. Then, we will experiment with the method setTransform. This method has 6 parameters that when modified will enable scaling skewing and translating. I will show you an application that shows us the changes real time.
Technology Used: HTML 5 and Visual Studio 2010
Keyword: HTML 5, Visual Studio 2010, canvas, width, height, document, getElementById, getContext, beginPath, moveTo, lineTo, fill, stroke, image, createpattern, fillStyle, rotate, scale, translate, setTransform, font, fillText.
Hello everyone, this is Ayad Boudiab, I am a senior dot net application developer, and we are in our HTML 5 training videos. We discussed a couple of videos already on canvas and how we can work with the canvas, and we are still continuing with this 229324 and we will adds some more to our knowledge on how canvasses work. We'll discuss some images and how we can create a pattern using a specific image. We'll also look at rotation and scale and translation and so on. So there are good points to cover in this video. Let's go ahead and get started and see what we can do with a canvas when it comes to working with images. If you notice over here on the right hand side with my project I have, under the HTML 5 examples, I have the images folder. It has a Mr. Bool".jpg" image. OK. That's been added for my project under the images folder. We know already that within our canvass we already specified that we're using jQuery, and the jQuery API is the one from Google. We referenced that as you see in the previous video. As you saw, I'm sorry, in the previous video. And in this case we get the element by ID, which is named "mycanvas". This is my canvass down here, defined by the ID.
And then up here, when we get that element we see if it has a context. If we are able to get the context, we get that 2D context and we start drawing. So this is within the IF statement. The lines that are commented here are the ones that I used in previous videos so they don't get in the way. OK. So down here we already spoke about the gradients, the new gradients, and radial gradients. And now lets see what we can do with the rest of the discussion. Now I want to define an image, and how do we do that in java scrip? "VarImage=new" and I use the image like if you work with [ ] languages, it's like a construct. Right? So I create an image object. Now, when the image loads I want to do something. So I can say image.unload, right? So when the image loads, equals "function". I want to execute that function when the image loads. That's the work that needs to happen when the image loads. Now, where is the source of this image? It's actually in the images folder like I specified earlier, right? So I can say "image.source=" and now I can specify where that image is. The image is actually in the images folder and it's named Mr.Bool.jpg. That's the actual source for that image. Now, back to the unload. When the image loads, what do you want to happen? I want to create some type of patter with this image. OK.
A pattern, something that repeats. Right? So, "varpattern=" and with the context I can use the method "createpattern". Using what? Using the image I'm going to create a pattern. And that, I'm going to make that patter repeat. That's how I can use the function "createpattern" within the context that I just got up there. So the context that creates the pattern using the image I'm going to make that repeat. I'm going to draw a rectangle and fill that rectangle with that specific pattern. OK. So the pattern right now is not doing anything, but with the rectangle let's do "context.rectangle". I'm going to create a rectangle that starts at 5,5. That's the location, right? 5,5: 5 for the x 5 for the y. I'm going to specify the width and the height for that rectangle. Instead of specifying an exact value I'm going to take the width of the canvass and take 5 out of that, and then I'm going to take the height of the canvass and I'm going to take 5 out of that. So, the width is the width of the canvas minus 5. And the height is the height of the canvas minus 5. OK.
That's the rectangle that I just specified. Now, I'm going to specify the context.fillstyle. The fillstyle for this one is not going to be a pure color, it's not even going to be gradient; it's going to be the pattern that I just specified up there. Now I have a pattern filling that specific rectangle, all that I have is context.fill. Again, stroke is for the border and fill is for the inside. So now I can say context.fill. If I have this and I try to view it in the browser I have the canvass with the Mr. Bool logo repeating to draw itself within the canvas. OK. That's interesting right? I mean, we choose a specific pattern, we make that pattern repeat, and that pattern is based on that image so when the image loads we choose that pattern to be that image and then we put that in the rectangle inside the actual canvas. OK. Now, this is the, this is how it works with that specific pattern. Let's experiment with a couple new things. Now, can I make this rotate a bit, right? So I'm going to rotate that for a specific value. So go to context.rotate, and I'm going to make that rotate 0.2, in terms of radiant, right, instead of degree we have radiant. We specify the radiant value in this case, which was 0.2, and then let's try to load this image if you would in the browser. And we see that the image rotates for that specific value. It's not straight anymore, it has rotated. Right? So this is defined with the rotate function within the context class.
Now, can I scale this? Can I make it bigger or smaller? Right? OK. Let's see, context.scale to scale this specific image. And I'm going to choose make it smaller, so I'm going to choose 0.75. If I said, for example, 0.5 it would be half of it. I want it to be more than the half, right. So I'm going to say 0.75 which is three quarters of it, and then 0.75. This is the scaling, again, of that image. Now, if I view that in the browser you see it's scaled and it's smaller than the previous one that we just did. OK. Within, again, still within the canvas. Now, what else can I do? Can i translate this image? OK. Context.translate, and I'm going to translate that 100 on the X and 50 on the Y, 100,50. And that will be the actual values for the translate function. Translating this one gives me something like that. Right? I translated it 100 on the X, 50 on the Y. Now I have the image being, first of all, I created a pattern using the image, make that pattern repeat; drew the rectangle and specified the fill style to be that patter; and then I took that and within the context I made that rotate; I made that scale; and I made that translate to a specific value. OK.
Now, let's go ahead and do some more work as far as transforming the actual objects. Let's go ahead and comment those out. OK. Now, how about using the transform. The set transform function that has a bunch of values that I can work with. The transform function, first of all, has some values that I want to explain to you before we can proceed. But first of all let's do some, let's display a couple of things. Using the context that I have I'm going to choose a font. In this case the font that I choose will be 15pt, or you know what, let's make that bigger: let's make that 30pt. 30pt and let's choose the calibri font. OK. So 30pt calibri, that's the actual font that I choose. And then I'm going to do "context.filltext", I'm going to put some text in there. Capital "T". The text will be "HTML 5 Training." Let's make sure I fixed those double codes in here. So, context.filltext("HTML 5 Training"), and I want to specify the values to be at let's say 50,50.
So by doing so, specifying a font and filling some text in that canvas I'll end up with something like this. OK. Location 50,50, I put that "HTML 5 Training" with a big font. OK. Now, I want to work with some transformation. OK. So before the font I'm going to specify "context.settransform". Settransform has a bunch of values that I have to deal with. As a matter of fact they call them "A, B, C, D, E, and F." The A, they call that the scale on the X. The B, they call it the skew on the X. The C, they call the skew on the Y. The D is the actual scale on the Y. The E is the translate on the X. And the F is the translate on the Y. That's a mouthful, right? There's a lot of stuff in there that you need to work with. And this is defined based on some type of matrix. If you've done some algebra, linear algebra, you know what we're talking about. Some matrices that make things rotate, scale, transform kind of thing. OK. Now, by the way, I found this example on the internet, that's the specific website that you see on top, this, here's the full address for the website, and for this one I have a specific small app that helped me change those values. OK. So let me scroll up a bit. If you notice in here, and here are the values, OK. So let's take a screen shot of this. These are the values that I'm interested in. That's part of the matrix, right. And let's go down here and see what we can do with these values. Again, remember that the first one of the matrices is called the X scale, right? This is A, the X's scale, which will scale it on the X. And this will scale it on the Y, right? This is skewing on the Y, skewing on the X. "001" these are values that we don't change in terms of the Z values; we don't change those. And the bottom ones are the X position and the Y position. OK. So let's experiment with this a bit and see what kind of work it gives us. Look at the box over here. This is the A value, being 1. So when I decrease that it decreases the size; increase that and it increases the size. Bring it back to 1. Now for the B value, OK, you see this skewing that we're talking about? This is a negative value and this is a positive value. OK. Now, again, the C value represents the X skew. If I change this value for the X negatively it goes this way, positively goes that way because it works with the X axis, right? This one's working with the Y axis. The D value represents the Y scale. The Y scale, if I change those, scaling the Y, and here's the other way around for scaling the Y. OK. Bring it back to 1. Bring this one to 1. And bring this one back to 1. OK.
Now, for the transform I'm moving it left, right? I'm moving it right. And I'm moving it up and moving it down. OK. So these are the values that you need to work with. When I say A, B, C, D, E, F, that's what's I'm talking about. And as far as the actual matrix compared to the matrix that you see here, that's how they are. The X scale on the top, underneath is X skew, X position. Y skew , Y scale, Y position. You don't mess with the other ones as far as Z is concerned, these are 001.
OK. So now let's go ahead and, sorry, let's close that, let's go ahead and modify these values based on what we've learned. The context that settransform, and here are the actual HTML 5 training that we're talking about. OK. So let's change that a bit and see what we end up with. Again, the A value, the first one, is the X scale. I'm going to leave that 1 as it is. That means I'm not changing it. Now the second one is skewing on the X, so I'm going to make that -0.5. The third parameter is the C, which is skewing on the Y. I'm going to make that value 0.5. And then the fourth one is actually the scaling on the Y; I'm going to leave that again as is it. And then for the translate, X translate Y, I'm going to make, for example, this is to be 10 translate X and then 80 translate Y. Again, I'm just giving a quick example in here because what I showed you on the small app here, you can mess with these values any way you want to. You can spend all day doing that, but in this case I'm just giving you the settransform, what parameters it takes, and I'm just trying to change those as an example. If I right click that and view it in the browser, here's the end of my changes as far as the scaling, skewing and the translating for this text. OK. So i hope this discussion of transform and rotation and scaling and translation has been helpful to you. Please drop us a line on Mr Boul website if you have any question. Thank you very much for listening, I am Asiab Mojab, and you take care.