Continuing out of HVM L5 features in this video we're going to be looking at the canvass element which
at its base level allows us to draw on the screen but at its most advanced allows you to create complete
2D and 3D games that work right inside the browser.
We're not going to go that far.
But if you want to have a quick google of HCM L5 canvas games or HMO five canvas examples you'll see
some really cool stuff.
So starting at the beginning we create a canvas with the canvas tag as you might imagine.
And then we usually give it an ID of something like my canvas and then we're going to specify a width
that's OK for 500 and a height of let's say 400.
Now in itself that doesn't show anything at all.
So we might want to give it a little bit of style
for example a border on pick's solid gray.
Just to be sure that it's there.
There it is.
So to do anything with our canvas we need javascript.
So let's bring in a script tag and we'll start by getting the canvas which will do in the usual way.
But I'll assign a variable to it so that we can access it
from later on in the javascript much easier.
So documents don't get element by id my canvas.
And then the first thing we need to specify is whether we're working into the OR 3D.
And we do that by creating a context and the context is my canvas don't get context and we want to specify
2D because we're working in two dimensions here.
And now let's say we want to add a rectangle to this canvas we would first specify the fill style so
we get that within the
context and that can either be a color or even a gradient or a pattern or see how to do the latter later
on.
But for a color I'm just going to get one from my color picker here.
So let's go for a nice green and then copy that to the clipboard with the hash in front and there we
go.
So that will specify the color that we're using until we change it.
And then to draw a rectangle we use the fill rect so that we'll draw a filled in rectangle and for the
fill recked function we need to specify four numbers.
So the first two numbers are the coordinates of the top left of the rectangle.
Now the coordinate system in our canvas starts at the top left.
So this would be 0 0 and the bottom right would then be in my case 500 comma 400 500 along and 400 down.
So if we wanted to start our rectangle in the top left corner and we would use 0 0 and then the last
two numbers are the width and height of the rectangle.
So if we happens to make it 100 pixels in the horizontal and 50 pixels in the vertical and we would
do it like that
super.
So obviously I could change those numbers to anything I wanted.
To make a rectangle anywhere on the canvas so that's rectangles.
How about lines.
Lines are very easy to draw as well.
We use context again and then in this case we move to wherever we want the line to start.
So let's say we want to draw a line from the bottom left of the canvas to the top right.
So what are the coordinates of the bottom left of the canvas down here.
All right I hope you get to the bottom left is 0 in the x direction and 400 down.
So that's zero comma 400.
Then we take our context again and line two.
And this is to specify where we want the line to go to.
So once again question for you.
What are the coordinates of the top right of the rectangle of the canvas or
k.
Hope you got are 500 a long and 0 down.
So 500 0 and then finally we have to specify to actually draw the line.
And we do that using context dot struck
OK.
So there we go.
So that's drawing a line from bottom left to top right.
Notice that the line is not green.
That's because we've set the fill style to green but the line doesn't have a fill style.
It instead has eight stroke style.
So if we set that
again we could set that see anything we liked but I'm going to choose a color that's have a red for
this one.
And that will then change the color of our line.
We can also change the thickness of the line using context dot line with and we can put that equal to
whatever we like.
So I say 20 I'll make it pretty thick 26 1:34 20 pixels to be precise.
And there we go.
So a quick challenge for you then to practice this.
Can you draw a 200 by 200 pixels square in the center of the canvas with a red X criss crossing it from
the top left to the bottom right and the bottom left to the top right.
Everett
OK.
How have you managed it.
It's pretty straightforward.
The tricky bit is just getting the math right.
So let's create a fill rectangle again and because we want it 200 by 200 in the center here then we
need to work out what the center of the canvas is.
So this is 500 pixels wide.
So the center is going to be 250 of that and then if we wanted 100 200 pixels wide in total we want
to get 100 that way and 100 that way.
So hundred to the left of 250 is 150.
And then we also want to go 100 pixels up of the center.
So the height is 400.
So the center is 200.
So 100 pixels up from that is 100.
And then we just specify the width and the height both of which are 200
K.
Let's check that's looks pretty good.
Now let's do our line.
So we use context dot move to and I'm going to the top left to bottom right.
First off say the top left here is the same as what we had for the rectangle there.
So 150 comma 100 then we'll have a line 2 and we want the bottom right.
So that's going to be each of these plus two.
So 350 come 300 and we'll set the strike style
to be our color I'll just copy again.
And finally will the context it strike to draw the line.
There we go.
So that's the line from top left to bottom right real soon to the bottom left to top right.
We can actually do that within the same stroke here.
So we can use context.
Move to and then bottom left is going to be the same as top left but 200 down.
So that's 150 comma 300 because we had 200 to that 100 then and then
line two.
And again that's going to be the same as the top left coordinates.
But it's going to be 200.
Right.
So that's 350 150 plus two hundred.
And then the y coordinate is the same as for the top left.
All right.
Take a look.
There we go.
Moving swiftly on we can also draw circles that are pretty straightforward.
So for these ones we use context dot.
Begin paff
and then to draw a circle we use context dot arc and then we give the coordinates of the center of the
circle.
So let's say we want the center of the circle to be 100 Kamar 100.
So up there somewhere
then we give the radius of the circle which is the distance from the center to the edge.
So let's say that's 50 and then to specify the amount of Arc we want we use angles and specifically
we use a measure of angles called radians.
Now you're probably used to a full circle being 360 degrees but we can also break down the circle into
units called radians where instead of being 360 radians there are two pi radians in a full circle.
Now that might sound horrendously complicated but it is useful in a number of situations and is what
we need to do here.
So I want to do a full circle.
I want to go from if this is my center I want to get around from the right all the way around from the
start to the end.
So at the start of the circle is zero radians which essentially means on the right hand side there and
then remember there are two pi radians in a full circle.
So if I want to go all the way round I want to end my circle at two times pi and to get pi
in javascript we use math dot Pi so feel free to listen to that explanation again or do a quick bit
of online research about pi and radians but this will get us out full circle and I'll do another example
in a moment which should clarify it a little bit as well.
And then we use context strike statements before to draw the circle that we get.
So now we've got our full circle which is going round from there all the way round.
So to clarify what's going on with these angles let's imagine that we want to draw an arc from here
on the left to here at the top.
So maybe this is zero.
And all the way around is to pi.
So the starting point now is going to be half way round.
So all the way around is to PI half the way round is one PI.
So we're going to start just math.
Pi and then the finishing point is up here which is three quarters of the way round.
So if the full circle is to PI three quarters of it is going to be two pie times three quarters.
So I'm just going to take my two pi.
Multiply it by three quarters.
And then that will give me a quarter circle from the left to the top.
All right.
So now we've got rectangles we've got lines and we've got arcs and circles are two more things I'm going
to show you here.
And there are gradients and text.
So to add a gradient to our canvas we create a variable called gradients we can call it whatever we
like but gradient makes sense and this is going to be context dots create linear gradient and the we've
got zero.
And why 0 then which are the coordinates of the top left of where we want our gradient to be.
And X and Y 1 the bottom right of the gradient.
So I'm going to use this gradient in my square.
So the top left coordinates of my square are 150 and 100 and then the bottom right coordinates are 350
up 300.
So that's where I want my gradient to go.
Now we need to specify the colors involved in the gradient and to do that I add color stops to my gradient.
So we have gradient at color stop and this is going to be the starting color which is going to be the
color here or the color at 0 0 is the top left essentially.
And I can specify and HCM l color code or I could just use a word description.
So we're going to have white at the top left and then at the bottom right.
This has a color stop of one.
So that's point there.
And let's use
the green that we had before.
So that and then as you might have guessed instead of setting a color as our fill style we set gradient
as the fill style to them will have a very nice gradient from top left to bottom right.
Finally then we'll see how to add text to our canvas.
And again this is pretty straightforward.
We start off by specifying a font
so we might go for something like 20 pixels aerial and then we use fill text
and I'm just going to use my canvas and then we specify the bottom left coordinates of the text.
So if I went it somewhere around the middle at the top there I might specify 200 comma 50 and then just
before we run that we'll need to set the fill style again.
Because at the moment we've got it on a gradient which is only defined in that rectangle there.
So we can just update it to a field style of it to keep things simple black.
There we go.
So that's pretty much as far as we're going to go with the canvas.
But I've just got a quick challenge for you.
Can you make it say that see my canvas text goes from red on the left to green on the right with the
gradients.
Go for it.
OK.
You got.
So it will need to create a new gradient.
I'll call it text gradient which as before is going to be context.
Create linear gradient.
Now we want it to start at 200 km or 50
and we want it to end somewhere on the right.
I'll have to guess roughly where that is.
I think it's probably about 300 comma 50 as well.
And then we need to add our color stops so the text gradient at color stop and we want red on the left
side going to go for red and then we want yellow on the right.
So we'll go for yellow there and then we update our fill style to being text gradient and there we go.
Very stylish.
All right.
So there's obviously a huge amount more that you can do with canvas.
This has just been an introduction to how you can create basic shapes gradients and text.
I do want to put that into practice though.
So in the next video we'll have a canvas challenge which will build an analog clock.