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