1
00:00:01,610 --> 00:00:06,390
In this video, we're going to start to look at the canvas widget now in Kintore, everything is a widget.

2
00:00:06,410 --> 00:00:10,850
Everything you do a button is a widget, a label as a widget, everything is a widget.

3
00:00:11,000 --> 00:00:14,900
And the main widget we're going to be working with throughout this course is the canvas widget.

4
00:00:14,900 --> 00:00:17,450
And the canvas is sort of what it sounds like.

5
00:00:17,450 --> 00:00:18,200
It's a canvas.

6
00:00:18,200 --> 00:00:19,790
It's a thing you can draw on.

7
00:00:20,660 --> 00:00:23,570
And normally you don't just like draw on it.

8
00:00:23,570 --> 00:00:29,360
You you create shapes and placed them on it so you might create a line and put it on it might create

9
00:00:29,360 --> 00:00:30,710
a rectangle and put it on it.

10
00:00:30,710 --> 00:00:32,510
You might create an image and put it on it.

11
00:00:32,780 --> 00:00:34,390
We're going to be using it a little differently.

12
00:00:34,400 --> 00:00:36,380
We're going to be actually drawing on it with our mouse.

13
00:00:36,710 --> 00:00:39,140
But in this video, we're just going to start to build it out.

14
00:00:39,140 --> 00:00:43,600
So to do that, let's head over to our code and let's first just name it.

15
00:00:43,600 --> 00:00:45,770
And I'm going to call this my underscore canvas.

16
00:00:46,010 --> 00:00:49,670
And we want to set this equal to a canvas widget.

17
00:00:50,000 --> 00:00:51,620
And now where do we want to put this widget?

18
00:00:51,620 --> 00:00:53,360
We want to put it in our root directory.

19
00:00:53,540 --> 00:00:55,450
And that's just what we've named our window.

20
00:00:55,460 --> 00:00:57,940
So this is our root window, our canvas.

21
00:00:57,950 --> 00:00:59,760
We want to put it on our main window.

22
00:00:59,990 --> 00:01:04,130
So now we can pass some parameters like height and width and color.

23
00:01:04,220 --> 00:01:06,530
So let's start out by creating the width.

24
00:01:06,530 --> 00:01:09,290
And we want to set this to, let's say, six hundred.

25
00:01:09,830 --> 00:01:13,610
And we want the height to equal, let's say four hundred.

26
00:01:13,880 --> 00:01:16,900
Remember, our entire program is only 800 by 800.

27
00:01:16,910 --> 00:01:19,400
So we don't want it to take up the whole the whole window.

28
00:01:20,030 --> 00:01:24,530
You could if you wanted to, but I want to put some space around it just to make it look a little bit

29
00:01:24,530 --> 00:01:24,890
better.

30
00:01:25,070 --> 00:01:27,640
And then finally, we can pick the color.

31
00:01:27,650 --> 00:01:29,840
So the big stands for background.

32
00:01:30,080 --> 00:01:31,490
And I'm just going to make this white.

33
00:01:33,640 --> 00:01:37,750
Now, any time you create a widget encounter, you have to create the widget and then you have to put

34
00:01:37,750 --> 00:01:38,400
it on the screen.

35
00:01:38,410 --> 00:01:44,040
So to put it on the screen, we call my canvas dot pack and I want to give this a pad Y of 20.

36
00:01:44,350 --> 00:01:49,630
That's how much padding do we want to put on the Y axis, which is up and down, top and bottom.

37
00:01:49,840 --> 00:01:54,270
I want to push it down 20 pixels so that should work.

38
00:01:54,280 --> 00:01:58,830
So let's go ahead and save this and let's head over to our terminal and run this python paint up high.

39
00:01:59,170 --> 00:02:03,760
And when we do pull this over, you see we have this square box.

40
00:02:03,760 --> 00:02:08,260
It's six hundred by four hundred and it's white and that's our canvas.

41
00:02:08,270 --> 00:02:09,670
This is what we're going to be drawing on.

42
00:02:09,700 --> 00:02:11,740
So like I said, you can make this any size you want.

43
00:02:11,740 --> 00:02:17,680
If you want to make it a little bit bigger, maybe 700 by four hundred, whatever you want, you could

44
00:02:17,680 --> 00:02:18,190
do that.

45
00:02:18,490 --> 00:02:20,520
But I'm just going to leave it that there that size.

46
00:02:20,530 --> 00:02:21,970
Now we can play around with this.

47
00:02:22,150 --> 00:02:24,580
We can change it to black if we want.

48
00:02:24,970 --> 00:02:29,920
And this is going to give you a hint on how we change the background color of it later on when we have

49
00:02:29,920 --> 00:02:31,300
a button that allows us to do that.

50
00:02:31,300 --> 00:02:34,120
But for now, we can hard code this in and just change it to black.

51
00:02:34,390 --> 00:02:36,340
And if we come over here and run this again.

52
00:02:37,620 --> 00:02:42,600
And you notice I just push up on my keyboard to cycle through to the last command and then hit enter

53
00:02:42,900 --> 00:02:45,970
to to run this and you can see now it's black, right?

54
00:02:46,300 --> 00:02:47,220
So very cool.

55
00:02:47,490 --> 00:02:54,480
Now, one thing I do want to do real quickly is we've hardcoded this stuff in and this is fine for now.

56
00:02:54,480 --> 00:02:56,610
But in the future, we might want to use variables.

57
00:02:56,850 --> 00:02:59,430
So instead of using hard coding, let's create a variable.

58
00:02:59,440 --> 00:03:04,740
I'm just going to call it W for with and set the sequel to Six Hundred and I'll call this one H for

59
00:03:04,740 --> 00:03:07,380
height and set this equal to four hundred.

60
00:03:07,380 --> 00:03:11,210
And now we can pass these variables and instead of the numbers themselves.

61
00:03:11,580 --> 00:03:17,100
So this will be W and this will be H and let's go ahead and change this back to white for now.

62
00:03:18,020 --> 00:03:21,170
And we could create a variable for this, too, but for now, just keep it as white.

63
00:03:21,500 --> 00:03:25,900
So if we save this, run this guy again, we'll see no change at all.

64
00:03:25,910 --> 00:03:27,740
It's still six hundred by four hundred.

65
00:03:27,740 --> 00:03:30,500
But now we've done it with variables instead of hard coding it in.

66
00:03:30,650 --> 00:03:32,390
And you'll see why that's important later on.

67
00:03:32,630 --> 00:03:33,710
So that's the canvas.

68
00:03:33,710 --> 00:03:34,700
We've now created it.

69
00:03:34,700 --> 00:03:35,540
It's ready to go.

70
00:03:35,540 --> 00:03:36,830
We could start drawing on it.

71
00:03:37,080 --> 00:03:40,940
So in the next video, I'll show you how to draw lines onto the canvas programmatically.