1
00:00:00,420 --> 00:00:09,690
Welcome to part one of a two part lesson on how to draw on an HD PML canvas the finished canvas will

2
00:00:09,690 --> 00:00:16,620
look like this and you will be able to draw on this canvas by clicking and dragging with your mouse

3
00:00:17,310 --> 00:00:20,340
and when you press the button it will clear the canvas.

4
00:00:20,430 --> 00:00:22,330
But how do we get here.

5
00:00:22,710 --> 00:00:29,430
Being able to draw on a canvas on the Web site like that is actually a six step process.

6
00:00:29,430 --> 00:00:33,170
Step one is creating the canvas in the first place.

7
00:00:33,180 --> 00:00:39,330
This is the part that we did in the index that each team l file and step two is styling the canvas.

8
00:00:39,450 --> 00:00:42,880
And this is something that we're gonna do as part of this lesson.

9
00:00:42,930 --> 00:00:48,510
For example one of the things that we're gonna do in terms of styling is give our canvas a black background

10
00:00:49,620 --> 00:00:52,550
in order to draw something on the canvas.

11
00:00:52,560 --> 00:00:55,670
We first have to listen for events.

12
00:00:55,690 --> 00:00:57,370
And what do I mean by events.

13
00:00:57,420 --> 00:01:02,160
An example of an event would be like holding down a mouse button or moving the mouse or lifting the

14
00:01:02,160 --> 00:01:02,810
mouse button.

15
00:01:03,190 --> 00:01:04,860
But why is this important.

16
00:01:04,860 --> 00:01:10,080
Well if we want to draw something when the mouse is being clicked and dragged.

17
00:01:10,170 --> 00:01:15,780
We first have to detect if the mouse is being clicked and dragged and that means we have to set up our

18
00:01:15,780 --> 00:01:19,960
Web site to listen and respond to these events.

19
00:01:19,980 --> 00:01:26,290
The next thing we have to do is actually check where the mouse is on the Web site.

20
00:01:26,610 --> 00:01:32,370
And this means checking the coordinates of the mouse the position of the mouse.

21
00:01:32,460 --> 00:01:38,760
It's given by an X and Y coordinate and it's going to be the job of our event listener to report these

22
00:01:38,760 --> 00:01:41,170
coordinates back to us.

23
00:01:41,190 --> 00:01:47,460
The reason we need these coordinates is so that we can use them for drawing something drawing something

24
00:01:47,460 --> 00:01:53,730
with the mouse involves creating a line between all the coordinates that are reported back to us from

25
00:01:53,730 --> 00:01:57,600
the event listener and after we've done all of that.

26
00:01:57,600 --> 00:02:00,900
The final step is clearing the canvas.

27
00:02:00,900 --> 00:02:06,220
We have to set off the canvas afresh so that we can use it to draw a new number on it.

28
00:02:06,310 --> 00:02:08,420
In making new prediction.

29
00:02:08,640 --> 00:02:12,650
So that concludes the high level overview of what we're going to do with our canvas.

30
00:02:12,690 --> 00:02:16,300
Let's head into V.S. code and write some javascript.

31
00:02:16,560 --> 00:02:22,320
At this point you need to have your server running and you should have your website pulled up on local

32
00:02:22,320 --> 00:02:24,540
host and Google Chrome.

33
00:02:24,540 --> 00:02:30,060
The first thing that we're gonna do is we're going to add our JavaScript in a separate file all our

34
00:02:30,060 --> 00:02:32,040
drawing logic for the canvas.

35
00:02:32,170 --> 00:02:36,240
It's gonna go in a file other than this index thought H2 AML file.

36
00:02:36,990 --> 00:02:44,400
So right click here in the Explorer pane and click new file and give this file a name call it drawing

37
00:02:44,400 --> 00:02:49,740
dot J.S. and this dot J.S. is very important.

38
00:02:49,740 --> 00:02:55,150
Make sure you add that extension jazz of course stands for JavaScript as you can imagine.

39
00:02:55,560 --> 00:03:01,860
And this is also a worthwhile extension to know because these days I'm getting a lot of spam emails

40
00:03:02,070 --> 00:03:06,710
that include malicious javascript code with this J.S. extension.

41
00:03:06,750 --> 00:03:12,860
I remember when I used to have to just watch out for dot e x e files the windows executable is.

42
00:03:12,960 --> 00:03:16,220
But these days I'm getting a lot of spam with this.

43
00:03:16,480 --> 00:03:24,420
J.S. now inside this file let's create a new javascript function so we're going to use the function

44
00:03:24,420 --> 00:03:25,340
snippet here.

45
00:03:25,350 --> 00:03:31,980
This is the second one down and we're gonna give this function a name and this code is going to helpfully

46
00:03:32,010 --> 00:03:34,830
insert a lot of these syntax for us here.

47
00:03:34,950 --> 00:03:42,510
So let's give this function name and let's call it prepare a canvas with the camel casing and we're

48
00:03:42,510 --> 00:03:44,960
gonna delete the input parameters here.

49
00:03:44,970 --> 00:03:52,170
This is not going to take any inputs but inside we're going to log a message we want something to tell

50
00:03:52,170 --> 00:03:57,750
us that this function has been successfully executed in the Chrome developer console.

51
00:03:57,750 --> 00:04:05,850
So I want to type log and insert the log snippet here and I'll just have a very simple log message reading

52
00:04:06,720 --> 00:04:10,280
preparing canvas.

53
00:04:10,550 --> 00:04:16,740
Now I've created a function here in a separate file this drawing that J as file.

54
00:04:16,790 --> 00:04:20,530
How would I call this function from the index.

55
00:04:20,530 --> 00:04:22,210
Thought each html file.

56
00:04:22,370 --> 00:04:25,310
This is a different file after all.

57
00:04:25,310 --> 00:04:31,940
In order to make use of the code that's in this drawing not just file a sum I have to link these two

58
00:04:31,940 --> 00:04:40,850
files and the place I'm going to do that is in the head of the index that HD AML file and the place

59
00:04:40,850 --> 00:04:44,270
we're gonna do that is just below this to do right here.

60
00:04:44,270 --> 00:04:49,970
This is where we're gonna add that script tag just like we've done above and we're going to set the

61
00:04:49,970 --> 00:04:55,490
source equal to our drawing daunt J.S. file.

62
00:04:55,490 --> 00:05:02,000
In this case so the source is our drawing not just file which is in the same folder as our index Dot.

63
00:05:02,030 --> 00:05:09,200
Each time l file and when I close the script tag then I should see the closing tag being inserted here

64
00:05:09,260 --> 00:05:13,040
automatically by V.S. code.

65
00:05:13,040 --> 00:05:14,960
So the script tag is really really handy.

66
00:05:14,960 --> 00:05:22,610
Not only can we point to a file here in our explorer pane but we can also point to a U.R.L. that contains

67
00:05:22,610 --> 00:05:30,380
javascript like with our tensor flow J.S. and of course we can add javascript directly between these

68
00:05:30,380 --> 00:05:37,790
two script tags but now that we've linked to our javascript dot J.S. file with this line of code right

69
00:05:37,790 --> 00:05:46,640
here we can actually call that prepare canvas function right below in our index that each time our file.

70
00:05:47,030 --> 00:05:56,450
So if I write prepare a canvas right here and then just double check that the spelling here matches

71
00:05:56,600 --> 00:06:04,490
the name of the function that is right here and I save my changes on both of these files then I can

72
00:06:04,490 --> 00:06:12,650
go into Google Chrome refresh and then if I bring up the developer console on the right then I can see

73
00:06:12,650 --> 00:06:16,590
that log message preparing canvas right here.

74
00:06:16,610 --> 00:06:17,330
Great.

75
00:06:17,330 --> 00:06:24,710
So now that we've got that working let's style our canvas and we're gonna use javascript to do this.

76
00:06:24,860 --> 00:06:32,150
So in our drawing dot J.S. JavaScript file let's create a constant and let's call that constant canvas

77
00:06:33,070 --> 00:06:39,260
and we're gonna set that content equal to the canvas from the index thought each time l file.

78
00:06:39,260 --> 00:06:46,610
So how can we get hold of this element right here from the index that each time l file inside the drawing

79
00:06:46,610 --> 00:06:57,930
dot J.S. file well we can get hold of it via document dot get element by I.D. We're gonna supply the

80
00:06:57,930 --> 00:07:08,430
I.D. of the canvas element which is my canvas hyphenated to this get element by idea function and that

81
00:07:08,520 --> 00:07:11,420
will get hold of the canvas for us.

82
00:07:11,490 --> 00:07:16,380
Now of course you can get hold of any element by its idea he doesn't have to be the canvas.

83
00:07:16,380 --> 00:07:21,670
You just have to supply the idea of that element between the parentheses right here.

84
00:07:21,720 --> 00:07:26,880
Now the reason we're getting hold of the canvas here is because we're actually interested in manipulating

85
00:07:26,880 --> 00:07:28,350
this canvas.

86
00:07:28,350 --> 00:07:34,020
We're gonna style it right and the way we're gonna be able to do that is by has something called the

87
00:07:34,190 --> 00:07:36,720
canvases context.

88
00:07:36,720 --> 00:07:42,120
Now I know that's a very strange word but every time we want to do something to this canvas like drawing

89
00:07:42,150 --> 00:07:48,030
it or change its colour we have to go through something called the context.

90
00:07:48,030 --> 00:07:54,450
In other words the context is an object that provides methods and properties for drawing on the canvas

91
00:07:54,450 --> 00:07:56,490
or manipulating the canvas.

92
00:07:56,490 --> 00:08:06,930
So I want to store this context in a variable called context so const context is equal to and then when

93
00:08:06,930 --> 00:08:16,020
I get hold of the context through the canvas with canvas don't get context and in the parentheses I'll

94
00:08:16,020 --> 00:08:20,670
supply to D as you can see from the quick documentation.

95
00:08:20,670 --> 00:08:23,780
There are two dimensional and three dimensional canvases.

96
00:08:23,820 --> 00:08:29,340
We're gonna be using a two dimensional canvas now to see the context in action.

97
00:08:29,340 --> 00:08:35,820
Now that we've got it as an example let's make our context white and we can do that with context dot

98
00:08:36,150 --> 00:08:46,530
Phil style and context dot Phil style is a property of the context and we can set the Phil style here

99
00:08:46,890 --> 00:08:56,540
with a hex code for a colour and hex code for white is the pound symbol and then six trailing Fs.

100
00:08:56,910 --> 00:09:05,340
Now that we've decided on the Phil style let's draw a white rectangle on to our canvas so we can create

101
00:09:05,340 --> 00:09:12,800
that white rectangle with context dot Phil rect and this is a method.

102
00:09:12,900 --> 00:09:17,580
So we're gonna have these parentheses I'm going apply for inputs and X and Y.

103
00:09:17,580 --> 00:09:19,990
So this is the positioning of the rectangle.

104
00:09:20,100 --> 00:09:27,750
And if we want that to be at the origin it'll be 0 0 and then we have to decide on the sizing of this

105
00:09:27,750 --> 00:09:30,010
rectangle a width and a height.

106
00:09:30,390 --> 00:09:38,430
And if we want the entire canvas to be filled we can do that with client width so canvas top client

107
00:09:38,460 --> 00:09:39,230
width.

108
00:09:39,630 --> 00:09:46,760
And for the entire height you guessed it it's canvas dot client height.

109
00:09:46,890 --> 00:09:54,510
So I'll add that semicolon at the end save my changes and then refresh my page and what I see is a white

110
00:09:54,750 --> 00:09:55,780
canvas.

111
00:09:55,890 --> 00:09:57,580
So that's the context and action.

112
00:09:57,600 --> 00:10:01,410
It allows us to manipulate the canvas.

113
00:10:01,410 --> 00:10:03,960
But let's make this canvas black instead.

114
00:10:04,320 --> 00:10:11,340
So instead of providing the hex code for the colour here what we can do is we can go to the very top

115
00:10:11,460 --> 00:10:17,220
of our drawing that jazz and critic constant him for the background colour.

116
00:10:17,820 --> 00:10:24,720
So quite like having a lot of the constants with these values at the top of my files second access them

117
00:10:24,750 --> 00:10:32,910
really really easily the hex code for black by the way is a pound symbol and then six zeros.

118
00:10:32,940 --> 00:10:40,470
So this is a black colour and then I can use that constant down here instead of setting the Phil style

119
00:10:40,500 --> 00:10:47,160
to White I want to set it to background colour if I save and refresh.

120
00:10:47,160 --> 00:10:51,400
We should see that canvas in black on our website.

121
00:10:51,450 --> 00:10:52,250
Brilliant.

122
00:10:52,290 --> 00:10:56,750
So that pretty much completes most of the styling that we're going to do for the canvas.

123
00:10:56,790 --> 00:11:03,840
Now it's time for the third step and that's adding a listener and the listener is there to be able to

124
00:11:03,840 --> 00:11:06,380
detect clicking and dragging.

125
00:11:06,870 --> 00:11:13,620
Let's add the very first listener to our website and we can do that by grabbing hold of our documents.

126
00:11:13,620 --> 00:11:19,590
So this is our entire site and adding an event listener to it.

127
00:11:19,620 --> 00:11:27,420
So the event listener has already suggested by yes code and all they need do is type 80 and press enter

128
00:11:28,050 --> 00:11:32,360
and in the parentheses I have to supply a number of things.

129
00:11:32,520 --> 00:11:35,750
The first is the name of the event that I want to listen to.

130
00:11:36,300 --> 00:11:42,420
So I don't want to listen to something called Mouse down so that's when the mouse is being clicked and

131
00:11:42,420 --> 00:11:49,420
then I have to provide another input to this add event listener method and that's what should happen

132
00:11:49,690 --> 00:11:50,680
when the mouse is pressed.

133
00:11:51,220 --> 00:11:54,750
So this isn't like a single value like a number or a string.

134
00:11:55,060 --> 00:12:03,100
Instead I've got to add some code here and I add a function and this function is not going to have a

135
00:12:03,100 --> 00:12:08,830
name and it's going to have a single parameter namely our event.

136
00:12:08,830 --> 00:12:11,760
So this is what our code looks like for the event listener.

137
00:12:11,980 --> 00:12:19,340
We've got a name of the event and we've got a function as the second input.

138
00:12:19,360 --> 00:12:24,910
Now I know the syntax here looks a little bit intimidating and we have to remember to add the semicolon

139
00:12:24,910 --> 00:12:29,380
here at the end but the purpose of it is actually very simple.

140
00:12:29,380 --> 00:12:36,340
Essentially when this event is detected the mouse gets pressed then all the code between these two curly

141
00:12:36,340 --> 00:12:39,100
braces gets executed.

142
00:12:39,100 --> 00:12:39,860
Let's try this out.

143
00:12:39,970 --> 00:12:47,020
Let's add a log statement here and we're just gonna add a log here that reads click.

144
00:12:47,170 --> 00:12:48,600
Exclamation mark.

145
00:12:48,810 --> 00:12:58,550
And if I save my changes head back into chrome refresh then if I take my house and just click somewhere

146
00:12:58,880 --> 00:13:02,460
then you can see the console log appear here.

147
00:13:02,480 --> 00:13:08,020
So if I click multiple times then you get this whole thing being executed a total of nine times.

148
00:13:08,030 --> 00:13:08,830
Right.

149
00:13:08,900 --> 00:13:16,260
So the functionality of this bit of code is a lot less complicated than what the syntax lets you believe.

150
00:13:16,520 --> 00:13:23,750
We add a listener to our document that detects if the mouse is being pressed down and when the mouse

151
00:13:23,750 --> 00:13:27,230
click is being detected then this is the code that gets executed.

152
00:13:27,230 --> 00:13:31,000
What if we get notified of the event now.

153
00:13:31,130 --> 00:13:37,040
If we hover over this add event listener but we get to see the quick documentation and we get to see

154
00:13:37,040 --> 00:13:44,060
the technical jargon for what it is that we've done so we've appended an event listener and this function

155
00:13:44,060 --> 00:13:44,210
here.

156
00:13:44,210 --> 00:13:53,170
The second argument is a callback and the callback will be invoked when the event is dispatched.

157
00:13:53,210 --> 00:13:54,320
So there you go.

158
00:13:54,320 --> 00:13:59,240
That's the technical explanation for what this code does.

159
00:13:59,240 --> 00:14:06,890
Now of course mouse down isn't the only event out there so which other events can we listen to.

160
00:14:06,890 --> 00:14:13,760
Well if we head over to the NBN web documentation on this topic then we get this event reference page

161
00:14:14,270 --> 00:14:18,170
and here we've got events grouped by category.

162
00:14:18,200 --> 00:14:27,620
So what I'd like you to do as a challenge is I'd like you to log the word move every time the mouse

163
00:14:27,710 --> 00:14:29,740
moves on our website.

164
00:14:30,110 --> 00:14:33,830
And I recommend you to use this page right here.

165
00:14:33,830 --> 00:14:37,410
This documentation to help you write the code.

166
00:14:37,670 --> 00:14:41,350
I'll give you a few seconds to pause the video before I show you the solution.

167
00:14:43,990 --> 00:14:45,180
Ready.

168
00:14:45,190 --> 00:14:46,610
Here's how it works.

169
00:14:46,630 --> 00:14:53,380
So if we scroll down a little bit here on this page we can see that under mouse events we have this

170
00:14:53,380 --> 00:15:00,730
event here called mouse move and this is the event that we're gonna add a listener for on our document.

171
00:15:01,300 --> 00:15:07,480
So heading back into as code I can even copy this whole thing pasted below.

172
00:15:07,480 --> 00:15:15,940
Change the name of the event from mouse down to mouse move and then just change by log message to move

173
00:15:16,420 --> 00:15:16,970
and that's it.

174
00:15:17,470 --> 00:15:21,560
So let's take a look at what this looks like on our Web site.

175
00:15:21,610 --> 00:15:28,990
Saving the changes and heading back into chrome and refreshing the page you can see that this event

176
00:15:29,020 --> 00:15:35,330
gets triggered loads and loads of times even for very small movements of the mouse.

177
00:15:35,350 --> 00:15:35,980
Great.

178
00:15:36,070 --> 00:15:42,440
Now that we've got our listener working let's take it to the next level and grab our mouse coordinates.

179
00:15:42,790 --> 00:15:44,090
How we're gonna do that.

180
00:15:44,170 --> 00:15:50,410
Well we can actually get them from the event here in our callback.

181
00:15:50,410 --> 00:15:57,400
In other words this function here doesn't just execute all the code between these two curly braces when

182
00:15:57,400 --> 00:16:03,990
the event is triggered but it also gives us a handle on the event that triggered it in the first place.

183
00:16:04,150 --> 00:16:08,360
And it's this event that will have the mouse coordinates inside of it.

184
00:16:08,950 --> 00:16:10,950
Let me show you how to get a hold of them.

185
00:16:10,990 --> 00:16:17,830
I'm going to modify my log message here and I'm going to have that log message read x coordinate and

186
00:16:17,830 --> 00:16:24,970
then just outside of the string I'm going to add that plus operator and then I'm going to use that event

187
00:16:25,060 --> 00:16:32,770
that I've got from my callback and I'm going to use the client X prop..

188
00:16:32,800 --> 00:16:40,030
So this is the x coordinate of the mouse when the mouse gets clicked and then the y coordinate.

189
00:16:40,090 --> 00:16:44,500
As you can guess is simply event dot client y.

190
00:16:45,460 --> 00:16:51,490
So let's see what these coordinates all by saving the changes heading back into chrome refreshing.

191
00:16:51,580 --> 00:16:59,920
And then if I click somewhere I can see that right here is coordinate 8 0 8 and 2 6 7.

192
00:16:59,920 --> 00:17:02,260
Now I've got a challenge for you again.

193
00:17:02,350 --> 00:17:09,690
Can you find the part of the Web site where the coordinates are 0 and 0 0 for x and 0 for y.

194
00:17:09,850 --> 00:17:13,270
Can you find the origin of the document.

195
00:17:13,270 --> 00:17:19,980
I'll give you a few seconds to pause the video before I show you the solution so I'm guessing you did

196
00:17:19,990 --> 00:17:27,570
a bit of clicking around and at this point you might have discovered that the origin is in the top left

197
00:17:27,570 --> 00:17:28,500
corner.

198
00:17:28,650 --> 00:17:32,870
This is where both X and Y are gonna be equal to zero.

199
00:17:32,940 --> 00:17:34,550
So the reason for it.

200
00:17:34,560 --> 00:17:38,550
Just double checking this is because it gives us an understanding of how this coordinate system actually

201
00:17:38,550 --> 00:17:39,750
works.

202
00:17:39,780 --> 00:17:49,510
So if the top left corner is at 0 0 then what we've learned is that along the x axis.

203
00:17:49,590 --> 00:17:58,200
So going horizontally to the right we get an increase in the x values and on the vertical axis going

204
00:17:58,200 --> 00:18:02,370
down we get an increase in the y values.

205
00:18:02,370 --> 00:18:06,330
But why do we care about these coordinates in the first place.

206
00:18:06,330 --> 00:18:14,430
The answer is is that we need these coordinates for drawing the way our drawing will work is it will

207
00:18:14,430 --> 00:18:23,430
draw a line between two points and the way we know where those points are on our canvas is through the

208
00:18:23,430 --> 00:18:25,920
coordinates of these points.

209
00:18:25,920 --> 00:18:34,560
So point one might be at X is equal to ten and y is equal to fifteen and point two might be at X is

210
00:18:34,560 --> 00:18:38,300
equal to fifty two and y is equal to twenty.

211
00:18:38,370 --> 00:18:43,740
So what this means is that what we're actually interested in in order to draw that line are four different

212
00:18:43,740 --> 00:18:53,460
values the X and the y coordinate of where the mouse was initially and then the x and y coordinate of

213
00:18:53,640 --> 00:18:57,460
where the mouse has moved to or where it is currently.

214
00:18:57,480 --> 00:19:03,810
So the previous x and the previous y will be the past values and the current X and current Y are the

215
00:19:03,810 --> 00:19:05,650
current location of the mouse.

216
00:19:05,760 --> 00:19:11,130
And of course the way we get these points is by tracking where the mouse is moving to.

217
00:19:12,030 --> 00:19:17,880
Now given that we're interested in these four values let's go back into the US code and create four

218
00:19:17,880 --> 00:19:21,790
variables to store these coordinates.

219
00:19:21,840 --> 00:19:26,550
So I want to come back up here and I'm going create four variables.

220
00:19:26,550 --> 00:19:34,740
The first one will be called Current X. And it's gonna get an initial value of zero.

221
00:19:34,950 --> 00:19:38,210
The second one will be called current Y.

222
00:19:38,400 --> 00:19:48,750
And again they'll have a value of zero initially and for the past values I'll see previous x is equal

223
00:19:48,750 --> 00:19:59,980
to zero and far previous Y is equal to zero so now that we've got our initial values or we've got our

224
00:19:59,980 --> 00:20:06,310
variables that are gonna be holding onto them we can have a think about how to update these variables

225
00:20:06,670 --> 00:20:08,420
as the mouse moves.

226
00:20:08,680 --> 00:20:10,710
We're going to update these values in our file.

227
00:20:11,320 --> 00:20:18,730
Well we're going to do that inside the callback inside this function right here when our mouse move

228
00:20:18,730 --> 00:20:20,590
event is triggered.

229
00:20:20,590 --> 00:20:25,750
So when it delete this line right here and the first thing I'm going to do is I'm going to set the previous

230
00:20:25,750 --> 00:20:30,510
value of x equal to the new value of X..

231
00:20:30,510 --> 00:20:30,970
Right.

232
00:20:31,030 --> 00:20:41,160
The current value of x and then I'll take the current value of x and update it with the actual position

233
00:20:41,220 --> 00:20:42,040
of the mouse.

234
00:20:42,050 --> 00:20:45,740
So event dot client x.

235
00:20:46,230 --> 00:20:51,390
So this way the current value of x is always updated to where the mouse is currently.

236
00:20:51,630 --> 00:21:00,690
And we're just always storing where the mouse was the previous time when this was executed in line 23.

237
00:21:00,690 --> 00:21:07,740
We're just going to set the previous value of x to what this value was the last time when this function

238
00:21:08,070 --> 00:21:09,360
was called.

239
00:21:09,360 --> 00:21:12,030
Now let's do the same thing for our y values.

240
00:21:12,030 --> 00:21:26,110
So previous Y is equal to current Y and current Y is equal to event dot client why now.

241
00:21:26,220 --> 00:21:33,480
Just before I save and refresh my website let's log the current x value just to see what it looks like

242
00:21:33,810 --> 00:21:35,250
in our console.

243
00:21:35,400 --> 00:21:41,830
And this is also a chance to kind of learn a little bit about string interpolation in JavaScript.

244
00:21:41,910 --> 00:21:47,430
We've already learned about this with Python f strings and we've come across those in the previous modules

245
00:21:47,880 --> 00:21:50,290
so JavaScript has something very very similar.

246
00:21:50,550 --> 00:21:56,430
And instead of using these single quotes what I'm actually gonna do is I want to use the tactic and

247
00:21:56,430 --> 00:22:05,110
the tactic allows me to write something like current x and then inside of this closing back to care

248
00:22:05,660 --> 00:22:14,850
I want to put a dollar sign some curly braces and then provide the current X so I can actually use my

249
00:22:15,030 --> 00:22:16,800
javascript variable name here.

250
00:22:16,930 --> 00:22:21,050
Current X inside of these curly braces and this dollar sign.

251
00:22:21,120 --> 00:22:27,300
And what this allows me to do is not use the plus operator that I've got up here and this makes the

252
00:22:27,330 --> 00:22:29,180
syntax really really readable.

253
00:22:29,310 --> 00:22:30,420
So it's quite nice.

254
00:22:30,450 --> 00:22:33,780
Just make sure you use the back ticket instead of the single quote.

255
00:22:33,900 --> 00:22:34,160
All right.

256
00:22:34,320 --> 00:22:43,560
So let me save and head back into chrome refresh and then I'll move my mouse and you can see the x value

257
00:22:43,890 --> 00:22:46,500
updating as I move my mouse around.

258
00:22:46,860 --> 00:22:50,340
But we don't actually want to draw on the entire Web site.

259
00:22:50,370 --> 00:22:51,210
Right.

260
00:22:51,210 --> 00:22:54,120
We just want to draw on our canvas.

261
00:22:54,120 --> 00:22:59,370
And what this means is that we should actually shift the origin from the top left corner of the page

262
00:22:59,790 --> 00:23:04,030
to the top left corner of our canvas.

263
00:23:04,030 --> 00:23:12,900
And in order to do that we need to calculate the offset from the top and the offset from the left with

264
00:23:12,900 --> 00:23:14,430
these two values in hand.

265
00:23:14,430 --> 00:23:17,820
We can adjust our current X and our current Y.

266
00:23:17,970 --> 00:23:21,270
So let's head interviews code and make those adjustments.

267
00:23:21,270 --> 00:23:30,120
The way to get hold of the offset is again through the canvas and the canvas has a property called offset

268
00:23:30,120 --> 00:23:37,260
left for the x value by subtracting the left offset from our mouse position.

269
00:23:37,260 --> 00:23:43,310
We're halfway there to moving our origin to the top left corner of the canvas for our y.

270
00:23:43,380 --> 00:23:50,730
Again we're going to use canvas thought and this case we're gonna go with offset top and this will complete

271
00:23:50,880 --> 00:23:52,740
moving our origin.

272
00:23:52,740 --> 00:24:01,380
So I'll save a comeback into our site refresh and then what you see is that if I go and position my

273
00:24:01,380 --> 00:24:06,150
mouse at this corner we've got the origin here at 0 0.

274
00:24:06,150 --> 00:24:07,490
Fantastic.

275
00:24:07,560 --> 00:24:13,060
This lines is up for the next step namely actually drawing our lines.

276
00:24:13,110 --> 00:24:17,180
So how does one actually draw something on a canvas.

277
00:24:17,190 --> 00:24:24,990
Well if you go to the developer documentation on MGM and check out the canvas tutorial you can read

278
00:24:24,990 --> 00:24:30,510
a very very in-depth tutorial on how to draw on a canvas.

279
00:24:30,510 --> 00:24:35,370
But what it actually comes down to for us are five steps.

280
00:24:35,400 --> 00:24:40,140
The first thing that we need to do is actually create something called a path and we can do that with

281
00:24:40,140 --> 00:24:47,270
a method called begin path what's a path a path is actually just a list of our coordinates.

282
00:24:47,280 --> 00:24:50,910
It's not the actual line it's just the list of the coordinates.

283
00:24:51,030 --> 00:24:53,290
So that's the one creating a path.

284
00:24:53,490 --> 00:25:00,050
Then what we have to do is we have to move the starting point of this path to where a mouse is at.

285
00:25:00,210 --> 00:25:03,690
So this is something we can do with the move to function.

286
00:25:03,690 --> 00:25:11,670
This will set the starting point for our line and that's going to be step three line to the line to

287
00:25:11,670 --> 00:25:14,620
method will actually create a line for us.

288
00:25:14,760 --> 00:25:20,040
It won't draw it it will still be invisible but it will actually create a line between the starting

289
00:25:20,040 --> 00:25:22,670
point in the path and the ending point in the path.

290
00:25:23,220 --> 00:25:26,610
It's essentially just going to connect these coordinates.

291
00:25:26,610 --> 00:25:30,850
The next step is closing the path because we're pretty much done with it now.

292
00:25:30,960 --> 00:25:32,550
So we can close it.

293
00:25:32,820 --> 00:25:40,660
And the final step is actually drawing the line and we accomplish this with a method called stroke stroke.

294
00:25:40,740 --> 00:25:47,700
We'll actually draw the line onto the screen for a detailed explanation of all of these methods and

295
00:25:47,700 --> 00:25:48,210
many more.

296
00:25:48,510 --> 00:25:54,150
You can actually head over to W three schools and go to the canvas reference and what you see there

297
00:25:54,390 --> 00:25:58,170
are all the methods I just mentioned explained in detail.

298
00:25:58,170 --> 00:26:02,070
So this is where you can go for the documentation.

299
00:26:02,130 --> 00:26:05,640
Now let's head into this code and actually draw our line.

300
00:26:05,640 --> 00:26:11,130
I'm going to get rid this log statement right here and I'm going to do these five things I'm going to

301
00:26:11,130 --> 00:26:19,530
begin the path move to line to close path and stroke and the object that's going to help us is going

302
00:26:19,530 --> 00:26:26,830
to be our context our context is going to be what will allow us to call this begin path method.

303
00:26:26,830 --> 00:26:35,920
So begin path will create our list of coordinates then context dot move to will set the starting point

304
00:26:36,160 --> 00:26:37,030
of the path.

305
00:26:37,300 --> 00:26:44,560
So where we should begin the line and the starting point will be given by well our previous ex and our

306
00:26:44,560 --> 00:26:45,910
previous why.

307
00:26:46,120 --> 00:26:52,180
So these coordinates will mark at the starting point of the line that we're going to draw the ending

308
00:26:52,180 --> 00:26:56,630
point of the line is gonna be where we're gonna draw the line to.

309
00:26:56,650 --> 00:27:04,150
So with context dot line two we can provide the ending point and that'll be of course the current X

310
00:27:04,390 --> 00:27:06,540
and the current Y.

311
00:27:06,550 --> 00:27:20,460
Now we can close the path and finally we can draw our line and that's with context dot stroke and that's

312
00:27:20,460 --> 00:27:21,380
it.

313
00:27:21,420 --> 00:27:35,110
So let's save this code head back into chrome refresh and then let's mouse over our canvas see anything.

314
00:27:35,190 --> 00:27:37,000
I don't see anything actually.

315
00:27:37,000 --> 00:27:38,400
But why not.

316
00:27:38,400 --> 00:27:45,330
Well well actually drawing a black line at the moment and black on black unfortunately is invisible.

317
00:27:45,330 --> 00:27:47,550
So we're gonna have to style that line.

318
00:27:47,550 --> 00:27:53,060
Let's change the line color to white coming back into V.S. code.

319
00:27:53,060 --> 00:28:02,080
I'm going to create a constant at the top that reads line underscore color and that is equal to white.

320
00:28:02,090 --> 00:28:09,500
By providing that hex code and then just below styling the canvas I'm going to style it a little further

321
00:28:09,680 --> 00:28:17,660
by setting these stroke style so context dot stroke style will allow me to set the color of the line

322
00:28:18,410 --> 00:28:25,730
so stroke style with a capital S for style is equal to and then I'm gonna set it equal to white.

323
00:28:25,760 --> 00:28:28,480
That line color I set earlier.

324
00:28:28,970 --> 00:28:36,530
Saving it and coming into chrome and refreshing will now allow me to see what I'm drawing onto my canvas

325
00:28:37,490 --> 00:28:47,160
um this is I guess a piece of abstract art but what I can do to improve my trying here is to make my

326
00:28:47,160 --> 00:28:54,140
line a little thicker because this is a very very thin line on a very large canvas.

327
00:28:54,690 --> 00:28:58,080
So let's add a constant at the top again for the line width.

328
00:28:58,740 --> 00:29:07,020
So um when I call it line width in all caps and I want it to be equal to I think 15 would be a good

329
00:29:07,020 --> 00:29:09,760
thickness for the line actually.

330
00:29:09,780 --> 00:29:17,790
So now I can come down here and change the width of my line but I think this is actually a good point

331
00:29:17,820 --> 00:29:21,990
to ask you to have a go at doing this yourself.

332
00:29:22,350 --> 00:29:30,150
Try and Google for the M.D. and documentation to change the line width and give this a go set the line

333
00:29:30,150 --> 00:29:32,800
with equal to 15.

334
00:29:33,030 --> 00:29:36,000
Pause the video I'll give you a few seconds before I show you the solution.

335
00:29:38,080 --> 00:29:38,970
Ready.

336
00:29:38,980 --> 00:29:40,420
Here's the solution.

337
00:29:40,540 --> 00:29:47,380
If you check the documentation for the canvas then what you'll find is there is actually a property

338
00:29:47,890 --> 00:29:49,450
called line width.

339
00:29:49,660 --> 00:29:56,710
So here under line styles even on W3 schools you can see what the name of the property is.

340
00:29:56,830 --> 00:30:01,320
So we can use it to set overturn the current line width.

341
00:30:01,450 --> 00:30:09,370
We're interested in setting it to 15 and we're gonna do that again through the context with line width

342
00:30:10,360 --> 00:30:20,430
and we're to set it equal to our constant from above line with like so if I save the changes or refresh

343
00:30:21,240 --> 00:30:29,670
then I can see what a thicker line looks like but upon inspection it does look a little strange right.

344
00:30:29,670 --> 00:30:33,240
Why is it looking so jagged.

345
00:30:33,240 --> 00:30:37,830
The reason is is that we haven't connected all the lines here that we're drawing.

346
00:30:37,830 --> 00:30:42,850
Every time the mouse moves we haven't specified how to join the lines.

347
00:30:42,960 --> 00:30:47,250
So let's do that in this code here where we're styling our canvas.

348
00:30:47,520 --> 00:30:55,200
There is actually a property called line join that we can set and line join can take a number of different

349
00:30:55,200 --> 00:30:55,800
values.

350
00:30:56,130 --> 00:30:59,960
But the one that will look best is called round.

351
00:31:00,210 --> 00:31:06,360
If you check the documentation here and look at what line joint actually is.

352
00:31:06,360 --> 00:31:13,720
Then you get this little example here and you can click on tried yourself to play with the example.

353
00:31:13,950 --> 00:31:21,080
And if I zoom in a little bit here to make this a lot more clear then I can join this property here

354
00:31:21,090 --> 00:31:22,880
from round two.

355
00:31:22,890 --> 00:31:30,240
See Bevel and run the example and you can see this little corner here where there joining the lines

356
00:31:30,600 --> 00:31:31,680
change.

357
00:31:31,680 --> 00:31:37,310
So here's miter and you could see that it's pointy with bevel.

358
00:31:37,470 --> 00:31:45,320
It gets cut off and with round there's a round joining segment that gets added here.

359
00:31:45,560 --> 00:31:54,290
So what this means in the context of our Web site is by saving and refreshing here is we get a nice

360
00:31:54,590 --> 00:31:56,780
smooth line that we're drawing.

361
00:31:56,870 --> 00:31:57,320
Brilliant.

362
00:31:57,710 --> 00:32:05,660
So this concludes part 1 of drawing on a canvas and we've covered quite a few different topics here

363
00:32:05,690 --> 00:32:06,130
actually.

364
00:32:06,560 --> 00:32:13,340
So this was been a very very in-depth lesson and we've learned everything from how to create your own

365
00:32:13,340 --> 00:32:20,690
JavaScript files and add them to your project and link them to the index thought html file.

366
00:32:20,780 --> 00:32:27,380
And we've also learned how to get hold of particular elements in your HMO file and manipulate and use

367
00:32:27,380 --> 00:32:34,810
them in a javascript file then we've learned about how event listeners work and how the coordinate system

368
00:32:34,870 --> 00:32:37,150
works on a Web site.

369
00:32:37,150 --> 00:32:43,440
And finally we've learned how to draw on an HDMI five canvas in the next lesson.

370
00:32:43,450 --> 00:32:49,810
We're gonna be fleshing out this drawing logic a bit more so that we will be able to draw on our canvas

371
00:32:49,990 --> 00:32:56,290
when we click and drag rather than just mouse over it for all of that and more.

372
00:32:56,410 --> 00:32:57,490
I'll see you on the next lesson.