0:00
uh hello guys welcome to this video so
0:02
in this video I'll show you a react
0:05
CH U drawing canvas package which allows
0:10
canvas drawing on the canvas
0:13
editor the the package is very simple
0:17
npmi react drawing this is essentially
0:21
the package let me open the zoomit
0:31
so this is essentially the package guys
0:33
uh the command is simple npmi react
0:37
drawing it's a fairly new package and
0:40
they have given a lot lot of
0:43
examples so one by one let me show you
0:52
so you can see you can draw on the
0:55
canvas uh you can change the color of
1:03
see and first of all we require this
1:09
drawing which has all these custom
1:11
methods right here and
1:17
here we are drawing this you will see
1:20
that there is also a second example
1:23
which is there of this package
1:30
so it's a fairly simple example uh where
1:34
we have a simple canvas right here a box
1:37
and inside this box we can draw
1:44
canvas so first of all we actually
1:49
package by using the import statement
1:52
and after that inside the functional
1:54
component uh use this
1:56
component and here you can control the
1:59
width the height here so of this image
2:02
so let's suppose I change this
2:08
to so here you can specify the image
2:12
width and the height here in these two
2:14
attributes we actually also get this
2:17
image Custom Image that you see right
2:22
the so we can even add text as well
2:26
instead of images so there is a specific
2:33
time this hello world text is added if
2:37
you want to add this text you simply
2:39
click on the canvas the text will be
2:42
added you can see that as you click
2:44
inside the canvas this text will be
2:46
added so this is you can even add text
2:54
well simply click on the canvas and here
2:57
you can change this text to any text of
2:59
your Choice from hello world again we
3:02
have a series of methods right here from
3:06
drawing brush text we can manipulate
3:09
this we can even change the color of the
3:11
text as well it is green we can change
3:14
the phone size as well so all these
3:17
properties we can control guys using
3:19
this nice little react canvas package
3:21
which allows you to draw something on
3:23
the canvas you can check out this
3:25
package on npmjs.com just search for
3:28
this package and simply start using it
3:30
inside your react CH application we have
3:32
all these attributes that you can
3:34
control the brush size height FPS width
3:39
all these attributes you can control so
3:42
definitely check out this package it's a
3:43
very good package and also check out my
3:47
website free mediat tools.com which
3:49
contains thousands of tools regarding
3:51
audio video and image
