1
00:00:01,200 --> 00:00:09,660
High in this video, we talk about canvas indicator, so I will tell you, I will give you a quick introduction

2
00:00:09,660 --> 00:00:11,600
about what is a canvas.

3
00:00:11,610 --> 00:00:13,130
Then we will start recording it.

4
00:00:13,620 --> 00:00:20,260
So we saw what we saw before, how to use frames and how to create it, how to put anything on it.

5
00:00:20,730 --> 00:00:27,060
Now, the canvas is a little bit, if you will put it in a in the application, it would be something

6
00:00:27,060 --> 00:00:27,520
similar.

7
00:00:27,540 --> 00:00:32,280
It will be a zone and which has color, which has with and height, etc..

8
00:00:32,670 --> 00:00:40,290
But when we use this canvas, because if you want to draw something on the application, maybe you want

9
00:00:40,290 --> 00:00:47,160
to create an application as a paint or anything like this, or you want to draw on an image so you can

10
00:00:47,160 --> 00:00:54,360
put an image on the canvas and draw anything on it, or you want to grab or bring something from the

11
00:00:54,360 --> 00:00:54,750
image.

12
00:00:54,960 --> 00:01:03,960
So you will draw or you will extract the coordinates of all the X and Y of the image or of the objects

13
00:01:03,960 --> 00:01:06,420
from the image and all this stuff.

14
00:01:06,420 --> 00:01:07,530
You can do that.

15
00:01:07,530 --> 00:01:10,770
You can do it with canvas interchangeable.

16
00:01:11,250 --> 00:01:15,690
So in this video, we start by creating canvas, a simple canvas.

17
00:01:16,020 --> 00:01:20,900
But in the next videos, which we started doing some images on the canvas, etc..

18
00:01:21,450 --> 00:01:26,510
So here we start by creating a NMT application.

19
00:01:26,820 --> 00:01:36,640
So as we did before from thinking, caring for everything, then here we have a window because Kate.

20
00:01:37,770 --> 00:01:42,630
Then we'll put this as a mainella, the

21
00:01:45,900 --> 00:01:55,320
main loop like this, then here will, I want to change the geometry of this application, because after

22
00:01:55,470 --> 00:02:03,180
putting a canvas on the application, we need to we need to have a really little bit bigger window so

23
00:02:03,180 --> 00:02:04,650
that we can see the canvas.

24
00:02:04,860 --> 00:02:07,200
OK, so here we have geometry.

25
00:02:08,970 --> 00:02:20,210
Then here I will put it 300 by 300 like it is now, here is our application and the application.

26
00:02:20,210 --> 00:02:22,770
Now what we have to do, I will create the canvas.

27
00:02:22,950 --> 00:02:25,980
So to create a canvas, we will do the same thing as we did before.

28
00:02:25,980 --> 00:02:32,880
There is a function called canvas that will do the work for us, as we did with frames, entries, buttons,

29
00:02:32,880 --> 00:02:33,350
etc..

30
00:02:33,960 --> 00:02:42,090
So here I will create the variable which is canvas, then the function with a uppercase, which is this

31
00:02:42,090 --> 00:02:42,990
one canvas.

32
00:02:43,560 --> 00:02:45,030
Now the same thing.

33
00:02:45,030 --> 00:02:53,370
We want to put it in the application so you will win for the window window that we have and we need

34
00:02:53,370 --> 00:02:57,370
to precise the width and the height of this canvas.

35
00:02:57,630 --> 00:03:01,200
So here we have it with a call.

36
00:03:01,350 --> 00:03:08,790
One hundred and five equal on hand as well that I would need also.

37
00:03:08,820 --> 00:03:19,350
So here we have background iCore Black and for working the same, you can use the park or the card,

38
00:03:19,350 --> 00:03:20,640
the great function.

39
00:03:21,120 --> 00:03:24,330
It depends to how how we want to.

40
00:03:25,420 --> 00:03:32,500
I would say that's how you want to put your items if you have only one item, which is only the canvas,

41
00:03:32,620 --> 00:03:39,550
so you can use the you can use just the back function, but if you have a lot of items and you need

42
00:03:39,550 --> 00:03:46,080
to create columns, a lot of columns, so literally you need to use the great function, you know,

43
00:03:46,080 --> 00:03:46,680
now what?

44
00:03:46,700 --> 00:03:50,260
You can use the grid and what you can use the back function.

45
00:03:51,130 --> 00:03:58,300
Now, here is the application and here is the kind of as you can see that it looks like exactly like

46
00:03:58,300 --> 00:03:59,640
the frame nothing.

47
00:03:59,650 --> 00:04:01,150
We can see the difference here.

48
00:04:01,420 --> 00:04:08,320
But in reality, this canvas has helped us to if we want to draw something or we want to put an image

49
00:04:08,320 --> 00:04:13,840
and draw on that image, etc., there is there is a lot of things that we can use that we can do in

50
00:04:14,200 --> 00:04:14,910
the canvas.

51
00:04:14,970 --> 00:04:19,570
OK, but for the moment I began.

52
00:04:20,110 --> 00:04:24,070
Now you can see that by default it will be here in the center as the frame.

53
00:04:24,400 --> 00:04:33,350
Now, if we want you to move it right or left or something like this, we can use the the bad form function.

54
00:04:33,370 --> 00:04:36,080
OK, but there is something else.

55
00:04:36,100 --> 00:04:42,490
There is a function that we can use also in the frames called the anchor so we can choose the anchor

56
00:04:42,490 --> 00:04:48,030
when where we want to to put this application this anniversary.

57
00:04:48,430 --> 00:04:55,460
So here we can we call it function anchor, then we can precise which side we want to put on the application.

58
00:04:55,480 --> 00:04:57,220
So here, for example, Norwest.

59
00:04:58,520 --> 00:05:04,250
Like this, and you can see that this will be here at the beginning, Norwest, and if I can right here

60
00:05:04,250 --> 00:05:09,280
center and it would be in Central, but by default it is in center and we can control any place we want.

61
00:05:09,290 --> 00:05:17,330
And even if Putin gets here, we can use the merge function, the padding functions, and we can move

62
00:05:17,330 --> 00:05:22,910
this window here to two to the right or to the button, etc..

63
00:05:23,990 --> 00:05:33,590
Now, if you want to expand or you want to push this canvas in the hole in the whole row here, or you

64
00:05:33,590 --> 00:05:40,100
want to push on the whole application we can use, that is the simple way, which is to put the same

65
00:05:41,390 --> 00:05:44,990
the same weight and height of the application, which is three hands by two hundred.

66
00:05:45,290 --> 00:05:51,410
Or if you want to make it to my if you want to optimize your program, which means you don't need to

67
00:05:51,410 --> 00:05:56,950
change this with, with and height in each time you will change this geometry.

68
00:05:57,290 --> 00:06:04,640
So for this case you can put it at the same size of this one without realizing the width and high.

69
00:06:04,910 --> 00:06:06,890
OK, I will show you how I can do that.

70
00:06:07,100 --> 00:06:08,170
There is two functions.

71
00:06:08,180 --> 00:06:09,860
The first function called.

72
00:06:10,820 --> 00:06:13,760
So if I will do Phil, then what?

73
00:06:14,090 --> 00:06:22,370
That means that I will feel both both sides, which means it will fill the whole room like this, will

74
00:06:22,370 --> 00:06:23,230
see it here.

75
00:06:23,390 --> 00:06:25,550
It will fill the whole row here.

76
00:06:25,910 --> 00:06:28,390
Now if I wanted to fill the whole application.

77
00:06:28,400 --> 00:06:32,920
So I need to expand this frame, this color, this canvas.

78
00:06:32,920 --> 00:06:33,240
Sorry.

79
00:06:33,590 --> 00:06:38,290
So if I would expand it, it will take this whole area.

80
00:06:38,870 --> 00:06:40,760
So same thing here.

81
00:06:40,760 --> 00:06:46,580
I will use the function, expand then equal one meant they wanted to expand.

82
00:06:46,670 --> 00:06:47,810
I wanted to be expanded.

83
00:06:48,350 --> 00:06:51,270
So here is as you can see, here is the canvas.

84
00:06:51,740 --> 00:07:00,410
Now what I will stop here is you can see that here we can we could create a canvas and you know how

85
00:07:00,410 --> 00:07:02,720
to control the width and height manually.

86
00:07:02,720 --> 00:07:12,680
Or if you want to put them automatically here, I can delete all this because using these two functions,

87
00:07:12,680 --> 00:07:15,160
we don't need to precisely the weight and height.

88
00:07:15,590 --> 00:07:18,530
So here is as you can see, here is our canvas.

89
00:07:18,950 --> 00:07:23,090
Now, you can see how if you want to change the course, you can change it here.

90
00:07:23,090 --> 00:07:30,080
If you want to change anything you can do here in the next videos, we will start doing some some editing

91
00:07:30,080 --> 00:07:35,250
or we can start putting image here or you can start doing something or the canvas texture.

92
00:07:35,660 --> 00:07:36,950
So I see you next video.

93
00:07:37,130 --> 00:07:37,670
But I.