Up next in 10
Build a Canva Clone Image Canvas Editor in Browser Using Fabric.js & Javascript in HTML5
Dec 13, 2025
Buy the Full Source code of Application here:
https://procodestore.com/index.php/product/build-a-canva-clone-image-canvas-editor-in-browser-using-fabric-js-javascript-in-html5/
Show More Show Less View Video Transcript
0:03
Uh hello guys, welcome to this uh live
0:05
stream. So in this live stream we will
0:07
basically talk about how to build a
0:10
fullyfledged Canva clone kind of a image
0:13
editor where you can actually make
0:15
graphics or images editor. So you will
0:20
basically see guys uh we have this uh
0:22
nice little editor that we made. This is
0:25
we have a white canvas out there. We can
0:27
change the background color of this
0:28
canvas to whichever color using this
0:31
color picker. I can change to red color.
0:33
And then we can add some text as well.
0:35
There are buttons out there inside this
0:37
interface. If you see, we can add
0:40
buttons.
0:43
If I just zoom out a little bit and just
0:46
show you basically the interface. This
0:48
is actually the canvas and this is these
0:51
are the buttons. We can actually add
0:53
some text fields, rectangles, shapes. We
0:56
can even add images as well. And also we
1:00
can export it to a PNG file guys or a
1:03
webp file. We have also the export
1:05
option as well. Then we have the canvas
1:08
color. And then we can resize the canvas
1:10
to various sizes. Various options are
1:12
there. We can resize to YouTube,
1:14
Facebook, Instagram, Twitter, Pinterest,
1:17
Tumblr. And uh we can basically change
1:20
the background color whichever color.
1:22
And then we can add some text field
1:24
right here. And you will basically see
1:26
you can control the sizing of it
1:28
basically of this text field. You can
1:30
control the width and the height like
1:31
this. You can edit this. Let's suppose I
1:34
change this to JavaScript
1:39
JavaScript
1:41
crash course.
1:43
So this is this tool will very much
1:45
helpful guys if you want to design some
1:47
thumbnails and various options are also
1:49
there with with this. If you just click
1:51
this uh uh text field right here. This
1:54
is actual text field. If you just click
1:56
it, the rest of the options will appear
1:59
at the bottom side. You will basically
2:00
see you will be you will be able to edit
2:03
the text right here as you type here.
2:06
Let me revert back to the original text
2:08
JavaScript. And you can even have a
2:10
shadow image as well. Let's suppose I
2:12
want to have a shadow. You can even
2:15
control the shadow as well. Background
2:16
color we can control everything. You can
2:19
see that. So we can give it a nice
2:21
shadow as well. Basically the background
2:23
color will be white and it has some
2:26
shadow color as well. So we can change
2:28
the shadow color accordingly and you can
2:31
control the shadow size as well. How
2:33
much shadow size you want to give.
2:36
You can see that. So it looks nice here.
2:38
You can see that it looks nice. And you
2:41
can control the shadow color like this.
2:44
So in this way you can control the
2:46
sizing as well. You can see that.
2:51
And uh now basically if the thumbnail is
2:54
ready. Now if you want to export this
2:56
thumbnail,
2:57
let me change the background to this.
3:00
Now if you want to export this
3:02
thumbnail, you can basically click the
3:03
export button. It will now export this
3:06
thumbnail to a PNG file. You will
3:08
basically see 61 kilobytes. And now if I
3:11
open this file here, you will basically
3:13
see your thumbnail is ready right here.
3:15
You can see the quality of the thumbnail
3:16
is very much constant and in this way
3:20
you don't need Canva at all guys. You
3:22
can basically build this free tool
3:24
inside JavaScript in browser. And we
3:27
have used FabricJS which is a third
3:29
party library of canvas to actually make
3:31
this uh editor. You can even add some
3:34
shapes. We can even add some images.
3:37
Let's suppose I want to add a image. So
3:40
I can add this image right here in this
3:42
thumbnail. You will basically see I can
3:45
add this image
3:48
just outside. You can just place this
3:50
accordingly wherever you need to place
3:53
it. You can control the sizing of this
3:56
whichever wherever you just need to do
3:59
this. You can just need to click this
4:01
elements in the canvas. You can place
4:03
them wherever you like. You can just
4:06
control the sizing of this image as well
4:08
by using this as well after you do this.
4:12
So now you we have some images as well.
4:15
So we can add multiple images as well
4:18
just you can see that we are basically
4:21
controlling
4:23
the width and the height by using the
4:25
mouse. So it makes it very much easy
4:28
guys to add multiple images right here.
4:31
And uh after that we can even add rect
4:34
rectangles as well. Let's suppose you
4:36
want to add some shapes. You can even
4:38
add some shapes as well. We can change
4:40
the background color of this rectangle
4:42
as well. Let's suppose I want to have
4:44
this. So you will basically see and we
4:48
can give it a outline color as well to
4:51
this rectangle. Let's suppose I give it
4:53
a black color.
5:05
So now if you want to export this you
5:07
can basically export this let's suppose
5:10
now to webp file. So I export this to
5:13
webp file guys. You will basically see
5:15
your image has been exported to webp
5:17
file which is a format which is there
5:19
for uh uh the browser. So this image now
5:23
opens in the browser. It's a webp image.
5:25
And now you can even control the sizing
5:27
of the canvas as well. We can control
5:29
let's suppose we are building for
5:30
Facebook. It will automatically resize
5:32
the canvas. You can even control you can
5:34
also control the sizing as well manually
5:37
as well. You can like this you can
5:40
control the sizing of the canvas. And
5:42
where we have different options for
5:44
Instagram it will be like this. Twitter
5:47
we have presets which are already
5:49
available. I hardcoded the width and the
5:52
height and Tumblr. And you can even
5:55
provide custom size as well. So here you
5:57
will provide the width. Let's suppose I
5:58
want to build 400 by 400.
6:02
So it will automatically resize.
6:07
So in this way guys you can build out
6:10
this thing and I will now be showing you
6:12
step by step how I build this. If you
6:15
are interested please hit that like
6:17
button, subscribe the channel as well if
6:19
you're watching it for the very first
6:20
time. Now let's get started guys. I will
6:23
basically show you this is actually the
6:25
library that we are building. If you
6:27
need the full source code guys, you can
6:29
go to the description. You can purchase
6:30
the full source code using stripe in
6:32
Indian rupees or PayPal in United States
6:34
dollar. So both the payment links are
6:36
given in the description of the video.
6:38
It will be a lengthy project guys
6:39
because it I think it's let me show you
6:42
the file. It is almost you will
6:45
basically see it is almost 379 lines of
6:48
code. This is actual file which we will
6:50
be building step by step. So it is
6:52
entirely built-in JavaScript HTML in the
6:55
browser. It doesn't use any serverside
6:57
code and we are using this fabric JS
7:00
powerful and simple JavaScript HTML
7:03
canvas library to actually build out
7:04
this Canva clone kind of an application.
7:07
So this library makes it very much easy
7:10
to basically build out graphics editors
7:13
and we will try to build this. So first
7:15
of all guys I will make a new file just
7:18
make canva html. So here you just need
7:23
to first of all
7:25
make a simple HTML file and write here
7:28
Canva clone in fabricjs.
7:33
So please hit that like button guys.
7:35
Subscribe the channel as well if you are
7:38
watching it for the very first time. So
7:40
the very first thing guys we will need
7:42
to do we need to use uh jQuery UI CDN
7:47
simply include the CDN for jQuery UI.
7:49
This is a CDN simply pause it and write
7:52
this. After that we will have some uh
7:55
elements. So we will have a div element.
7:57
We will give it ID to it and which will
8:00
be canvas container. So this parent
8:02
container will hold the canvas for us.
8:05
Inside this we will have the canvas
8:06
element and we will give it an ID to
8:09
this canvas so that we can target in
8:11
JavaScript id canvas and uh it will be
8:15
empty by default. And now we will
8:18
actually do guys we will after that we
8:21
will have input type of file we will
8:23
give it image input. So we will be
8:26
taking the input from the user to
8:29
actually add images/star.
8:33
So here guys, the user must be able to
8:36
select images if they if he wants to add
8:38
it to the canvas. Then we have three
8:41
buttons. First button will be for adding
8:44
text. Second button will be for adding
8:47
shapes which is rectangle.
8:50
You can even add some more shapes,
8:52
circles as well.
8:56
Then we will have add image button. So
8:59
three buttons are there. Add text
9:01
rectangle image and we will give it ID
9:05
to these three buttons. Add text button.
9:12
The second ID will be add rectangle
9:14
button.
9:17
This will be ID add image button.
9:23
So if you just refresh now guys
9:25
basically you will basically see this is
9:27
will the interface. We have choose file
9:29
button, add text, add rectangle, add
9:31
image. So what I need to do, we need to
9:33
now write our uh some CSS. So just write
9:38
here make the style tag and we will
9:40
actually target this canvas editor that
9:42
we made. So we will target it by the ID.
9:46
So hash symbol canvas container.
9:50
So inside this we will give it a
9:52
position of relative.
9:58
After that we will give it a width of
10:00
100%.
10:03
Height of 400 pixel and we will give it
10:07
a border of 1 pixel solid black.
10:13
This is a hexadimal code. And just give
10:15
it a semicolon right here. You will
10:17
basically see this will be the canvas
10:19
here. And we have a simple border out
10:21
there of black color and the width is
10:24
100%. And inside this canvas we will
10:28
basically give it we have the canvas
10:31
element which has got the ID of canvas.
10:34
We will also style it. We will give it a
10:36
position of absolute
10:38
and top is zero and uh we will give it a
10:42
top position of zero and left position
10:44
of also zero.
10:47
And uh
10:52
after that guys we will basically have
10:54
uh now
10:57
some JavaScript code. So now to write
11:00
the JavaScript code guys we do need to
11:02
add some CS uh JavaScript CDNs.
11:06
So these three CDNs we just need to add
11:09
just after the body just add this. First
11:12
of all we are adding fabric JS. You will
11:14
see that fabric min.js JS we are using
11:17
jQuery as well jQuery UI.js and also we
11:20
are using file saver which is used to
11:23
actually download the file as an
11:24
attachment whenever we will export our
11:26
image as a PNG or WEBP file this library
11:30
will be used. So just include all these
11:32
CDNs format your document and uh now we
11:36
will actually write our JavaScript code
11:38
in a different file. So we will say
11:41
script js. So I will make a new file
11:43
here
11:45
script.js. So this will be the actual
11:48
JavaScript code. So here in this first
11:50
of all we will declare a global variable
11:52
of canvas which will be accessible to
11:55
all the functions. So we will write the
11:57
document ready function of jQuery. When
11:59
all the elements are ready in the canvas
12:01
what we need to do? We need to first of
12:04
all initialize our fabric js canvas. So
12:08
inside fabric js guys it contains some
12:10
canvas class. We need to initialize it.
12:13
We need to pass the reference of the
12:15
canvas element like this. So here we are
12:18
actually passing the reference of the
12:21
canvas element. If you see guys
12:23
basically we are passing the reference
12:25
canvas
12:28
like this. So it it will it will
12:30
actually initialize a new
12:33
reference of the canvas element like
12:36
this. And if you just console log it,
12:39
console log canvas.
12:43
So what it will do basically if you
12:46
console. So this object will be created
12:49
which is if you see I object it contains
12:52
various properties out there. This
12:54
fabric fabric canvas element it contains
12:57
free drying brush lower canvas. All
13:00
these properties are there inside this
13:02
global object of canvas. With this help
13:05
of object we can draw something on the
13:07
canvas. We can export them into a PNG
13:09
WEBP file. This you will see basically
13:12
it's a uh canvas object that we created.
13:16
So after created this canvas object guys
13:18
we need to set the width and the height
13:21
of the canvas. We can set this using the
13:24
function which is set canvas size. This
13:27
is actually the function. We need to set
13:29
it to 1280 by 720.
13:33
And if you just refresh now guys, your
13:36
your canvas size will be set.
13:42
It is saying that set canvas size is not
13:44
defined
13:48
uh 1280 by 720.
13:55
Uh we are basically passing the
13:57
reference of the canvas element.
14:02
we are including canvas.js.
14:06
If you see here we have
14:17
so what I will do is that guys basically
14:20
uh we have this button out there of add
14:23
text. If you see here,
14:26
we can even directly attach the width as
14:29
well by 1280 and height by 720 to the
14:33
directly to the canvas. If you just
14:35
attach these two properties directly to
14:37
the canvas element, your canvas will be
14:39
resized. If you refresh here,
14:44
just refresh here.
14:51
Let me delete that here. Set canvas
14:53
size.
15:07
So after that guys if you see basically
15:09
uh we have given
15:12
this uh button add text button. So
15:15
inside our uh JavaScript what we can do
15:18
is that we can actually bind a onclick
15:21
event listener to this button. So what
15:22
we can do in j uh jQuery we have this
15:25
selector out there. We can basically add
15:28
text button.
15:31
So when we click this button so we will
15:34
actually add a text field to the canvas.
15:38
So now to adding it we will calculate
15:41
the left by canvas do width multip
15:44
divided by two
15:48
where top [snorts]
15:51
canvas
15:54
height
15:58
divided by two
16:01
and after that guys now to add the text
16:04
field we have a function out there in
16:07
fabric js
16:09
fabric
16:13
and it contains a class called as text
16:15
box. If you see basically in fabricjs we
16:19
have this function to actually add a
16:20
text box. We will add a default text as
16:24
a placeholder text. Whenever you add the
16:27
text and then we will attach these
16:29
positions left to left, top to top phone
16:31
size will be 20
16:35
and the phone family you can even
16:37
control that also.
16:40
It will be aial and
16:44
text color will be black. So it is hexa
16:46
decimal 0 0 0
16:49
and then we have the shadow
16:53
and color of the text will be zero.
16:57
Shadow color offset X
17:02
shadow offset will be zero. Offset Y
17:07
will also be zero.
17:10
This is we are talking about the shadow
17:12
of the text. We are initializing these
17:14
options and also the blur option will
17:16
also be zero.
17:18
Put a comma and then edit tableable.
17:20
This is actually the property basically
17:23
this is a boolean parameter which allows
17:25
you to edit the text after you added the
17:27
text field. Text align to center. We
17:30
will align the uh text in the center
17:33
position. Default value background color
17:35
will be
17:37
not. So default background color will be
17:39
nothing.
17:43
So uh before that guys we also need to
17:46
initialize some options.
17:50
Basically whenever we initialize we need
17:52
to initialize some
17:55
options here. We can write here also
17:59
just define this text objects. So these
18:02
are all it will be empty array. It will
18:05
contain all
18:07
text objects that is added to canvas.
18:12
it will be empty array and shape objects
18:15
whatever shapes that you add in the
18:16
canvas this will also be a empty array
18:21
and then the active
18:25
text index so whatever the
18:29
user is currently editing the widget so
18:32
what widgets the user has selected so
18:35
this will store uh uh initial value will
18:38
be minus one same goes with the active
18:41
shape index. This is basically the logic
18:44
in order to keep track of whichever
18:46
object is selected by the user in the
18:48
canvas. Default value for both these
18:50
variables will be minus one. This simply
18:52
means that we have a we haven't selected
18:55
any object.
18:57
So these are some of the variables which
19:00
are needed for this application. And now
19:02
if you add this uh text widget what I
19:05
need to do is that I need to push this
19:08
in the text object. So we can say text
19:11
objects dot push
19:16
dot push text
19:19
and we will add this to the canvas as
19:22
well. canvas dot add canvas dot set
19:27
active
19:29
object to text.
19:32
This is actually the function guys.
19:33
Basically we are setting the this active
19:36
object and then this active text index
19:39
will be equal to text objects dotlength
19:44
minus one.
19:51
So what I need to do is that here if I
19:54
click this button
19:58
nothing will happen. Let me see
20:09
if I console log this property here left
20:15
and top. So as I click the add text
20:18
button guys I am just troubleshooting
20:20
the problem. If I click this button.
20:39
So basically let me show you here.
20:44
You can find out all the source code
20:46
guys of this application in the
20:48
description of the video.
21:09
So what I will do is that here news
21:12
fabric canvas.
21:24
Let me create a new file here. Paste
21:26
this code right here. And uh what I will
21:29
do
21:38
include this file script.js.
21:42
So
21:45
if I refresh now,
21:48
click add text. It is saying that fabric
21:51
textbox is not a constructor. And if you
21:54
see basically it is printed out the left
21:56
and the right position which is 150 and
21:58
75.
22:01
It is basically saying that fabric dot
22:05
textbox.
22:29
And now do this. You will basically see
22:32
now you can see guys basically it has
22:34
added this uh text box. We can even add
22:38
multiple text boxes as well. If you
22:40
click now second one will be added.
22:47
So we just need to increase basically uh
22:49
the size of the canvas.
22:52
So now to set the size of the canvas
22:54
there is a function right here. Whenever
22:57
you initialize we can set set the canvas
23:00
size using this function
23:03
just right here. After we initialize it
23:05
there is a function in fabric.js to
23:07
actually set the canvas size. Set canvas
23:10
size 1280 by 720. So here we are
23:14
explicitly setting the canvas size of
23:17
fabric js. So there are two basically
23:20
canvas. First is the actual canvas
23:23
element and second is the fabric js
23:25
canvas element. So here we are setting
23:28
this size 120.
23:31
And if you just refresh now,
23:41
it is saying that set canvas side is not
23:44
defined.
23:46
Okay, I think there is this is actually
23:48
a function which we need to define.
23:55
Let me search for this function. set
23:58
canvas size.
24:06
Oh yeah, sorry guys. There is this is
24:08
actually a function that we need to
24:10
define and uh okay sorry that's why it
24:15
is saying that this function is not
24:17
defined. So we need to actually define
24:18
this function set canvas size
24:22
and it will actually take the width and
24:24
the height as two arguments.
24:26
We need to define this function.
24:30
And uh now to define this
24:33
we will target our canvas container.
24:39
We will make the CSS property add the
24:43
width to the actual width.
24:46
And same goes with the height as well.
24:56
And we will also target the canvas
24:59
element as well. Give it a attribute
25:02
of width.
25:17
And then canvas dot set width
25:24
width
25:27
canvas dot set height
25:30
height this this basically it's a part
25:33
of the fabricjs function set width and
25:35
set height with this function now you
25:38
can uh delete that uh attribute that you
25:40
have given inside HTML if you see yeah
25:44
so don't no attribute is required right
25:46
here you can delete that
25:49
so if you refresh Now automatically your
25:52
canvas will be resized to whatever value
25:54
that you pass right here. If you click
25:56
add text now it will be added right here
25:58
at the center position the text field.
26:01
You can resize it. You can change the
26:04
width and the height of this like this.
26:06
Control it with the mouse.
26:11
This is actually the fabric JS magic
26:13
guys which allows you to do this.
26:14
Similar to Canva inside Canva also you
26:17
can add multiple text fields right here.
26:19
You can see that
26:21
you can add multiple text.
26:27
So this is actually for the text field
26:29
guys. Similarly we will be doing it for
26:31
the other things as well. So you can
26:35
control all these properties. Basically
26:37
if you want to change the text color you
26:39
can shadow color all these properties
26:42
that you see are controlled by this font
26:45
family you can even change here. So now
26:48
after doing this guys what we need to do
26:52
we need to
26:55
uh create this function update text
26:59
editor
27:02
values. We need to create this function
27:04
and we pass this object of text and we
27:08
will show the text editor by using the
27:12
ID that we have given in the HTML
27:15
and canvas dot render all. So this
27:17
contains this this function is
27:19
considered inside
27:21
fabric JS to actually refresh the canvas
27:24
after you added elements inside this.
27:27
Lastly we will call this function. So we
27:29
need to define this function guys.
27:30
update editor text editor values.
27:34
So this function we need to define
27:39
and uh inside this function.
27:50
So I think
27:59
where is this function? Let me see guys.
28:01
Wait. Yeah, this will contain the object
28:04
which is added text object.
28:07
And inside this function guys, what we
28:09
need to do? We need to first of all
28:12
text input
28:14
dot whatever value is selected text
28:18
object.ext
28:22
What is the color input?
28:25
We will select the color input as well.
28:27
Whatever color input is selected by the
28:29
user, this is all part of of
28:34
in the index.html file guys. Basically
28:37
right here you need to create uh a text
28:41
editor.
28:43
If I show you basically this is actually
28:45
in the index.html. Every time that you
28:47
add a text field,
28:50
there will be a separate text editor
28:52
attached to it in the HTML. You will
28:55
basically find all the source code in
28:57
the description where you will uh you
28:59
can purchase it. Basically, every text
29:01
field has a separate text editor
29:03
involved. We have given an ID to it of
29:05
text editor and this will be text input,
29:09
color input, shadow color input, shadow
29:13
size input. We have given all these ids
29:15
to this element. So we are targeted in
29:17
sub in in JavaScript. We have also a
29:19
delete button to actually delete that
29:21
object. Phone select you can various
29:23
fonts are there. AIAL, Vana, Toma, Times
29:26
New Roman. You can select the size of
29:28
the font. Size input text align where to
29:31
align the text. Three positions are
29:34
there. So left, center, right. After
29:37
that we can select the background color
29:38
of the text as well. We have given the
29:40
ID as well. Then we can change the
29:43
canvas size as well. we have different
29:45
options. So this is a complete
29:48
application guys. If you are interested
29:50
you can purchase it. And now what I will
29:53
do is that
29:55
in the function here
30:00
update text editor values. So we need to
30:03
first of all
30:08
yeah we will get our text input value
30:11
color input value and also we need to
30:14
get the shadow input shadow
30:18
color input
30:24
text object
30:26
dot shadow dot color.
30:31
So let me show you some magic guys.
30:33
Basically whatever you will
30:36
let me just show you. If you add some
30:39
text element right here just select the
30:42
text here right here.
30:46
If you inspect element nothing will
30:48
happen. So what I need to do is that I
30:51
need to
30:53
uh as I select this element right here I
30:57
need to show the
31:00
uh text editor. So what I can do is that
31:04
basically as I add this
31:07
as I select on change I can basically
31:11
add this uh
31:14
all the elements. Let me just show you.
31:22
So canvas dot mouse down there is the
31:25
event that we can attach to the canvas
31:27
which is mouse down. So once we press
31:30
the mouse in the canvas this function
31:33
will automatically execute
31:35
and here we will just event.target
31:40
event.target dot type.
31:45
If it is equal to text box,
31:49
we will automatically check that if it
31:51
is a text box which is added in the
31:53
canvas. Then in that case we need to
31:57
active text index text objects dot index
32:02
of
32:04
target.
32:10
We will show the uh text editor. So now
32:12
to show it we can simply say text editor
32:18
dot show
32:21
in the else block we will hide this
32:23
editor. So we can say in order to hide
32:26
this we can say text editor dohide.
32:28
These are jQuery functions. So based
32:31
upon a condition if I click the canvas
32:34
if I let's suppose I add the text
32:38
and uh
32:45
it is saying that cannot read properties
32:47
of undefined reading on add script
32:53
canvas on. Sorry guys I declared this
32:56
outside.
32:58
It needs to be declared inside the
33:00
jQuery function right here. Just declare
33:03
it right here. Just make sure that you
33:06
declare it right here. Inside
33:13
it is saying target is not defined.
33:16
Okay. Sorry. Sorry. We need to event
33:41
down event is there I think.
34:05
So if you click now I think
34:16
You can see it is saying target is not
34:19
defined.
34:20
Uh I I know why it is saying target is
34:23
not defined because we need to define
34:24
that target. So now to define that
34:27
target
34:33
just as we
34:36
we need to update the text editor
34:38
values. So right here I will first of
34:40
all write this function.
34:55
This [snorts] is slightly very tricky
34:57
project guys. So let me show you the
35:00
full source code and show to you. Let's
35:02
just just wait.
35:05
So this is a complete project guys. If I
35:07
show you uh let me troubleshoot and you
35:10
can see that as I add the text field
35:14
uh in the bottom side corner if you'll
35:16
basically see the text editor is showing
35:18
right here you can manipulate the color
35:21
of the text you can change the color you
35:23
can see that so now you can do that.
35:35
So we can also have the shadow color as
35:37
well.
35:39
Let's suppose we can increase the
35:41
shadow.
35:43
Just select
35:45
by using the slider.
35:58
So you can see in this way you can do
35:59
this. And we also have the background
36:01
color color picker as well. You can see
36:04
that. So with this tool guys you can
36:06
make some awesome looking thumbnails for
36:08
you YouTube videos. It's a Canva clone
36:10
kind of it application. All the source
36:12
code is given guys and uh basically if
36:15
you show if I just show you the source
36:17
code basically we have written uh this
36:20
is just JavaScript code guys we have
36:24
used fabric js library. Uh it's a
36:26
complete project. If you are interested
36:29
the link is given and we have basically
36:31
this these uh options right here we are
36:34
breaking down uh we are taking all these
36:37
input fields from the text input color
36:39
input shadow color input all these
36:42
things this is a complete project if you
36:44
are interested guys it's a very good
36:46
project you will get to understand the
36:49
basics of fabricjs and it's a very good
36:51
library [snorts] and in the future as
36:53
well I will make more projects like this
36:55
you can even add images. Whatever images
36:59
that you want to add, you can add this
37:02
control the sizing of the image right
37:04
here. So, you don't need a very premium
37:07
looking Canva clone editor. You can it's
37:09
a very basic and yet looking very you
37:12
can export this image to a PNG image.
37:14
You will basically see like this very
37:17
awesome looking thumbnails you can make.
37:19
We can export it to WEBP format. You can
37:23
purchase it from PayPal in United State
37:25
dollar or you can use uh stripe and
37:27
purchase it in Indian rupees. Both the
37:29
payment links are given and you can
37:32
basically see you can change the canv
37:36
whichever color that you want.
37:39
You can see that. So it becomes very
37:41
much easy guys for the creators to
37:43
actually create thumbnails. You can even
37:46
add shapes as well. Let's suppose I want
37:48
to add some shape.
37:50
I can rotate this shape right here. If
37:53
you see there is also a rotation process
37:55
as well. Let's suppose I want to rotate
37:58
this and add this right here and change
38:01
the background color of this also. Let's
38:03
suppose this color
38:06
just select this.
38:14
You can see that. So
38:18
it's a very awesome editor guys. You
38:20
should be able to do this
38:28
and I think it's a very good thing. You
38:30
should be able to
38:34
outline is also there. You can also
38:38
control the change the phone size. You
38:40
can see whatever phones that you want.
38:42
You can even use Google phones as well.
38:44
Just you need to copy paste the name
38:46
here inside select list. We are only
38:48
using four phones.
38:50
You can even use some more phones. If
38:52
you have the source code, you can modify
38:54
it according to your own needs. So you
38:58
can purchase it. The link is given.
39:00
Alignment of the phone. You can align it
39:02
in the left position, center position or
39:05
in the right position.
39:07
It's a full script guys that I have g
39:10
given you. And you can check out the
39:14
description for the payment links. And
39:17
uh you can basically you can add some
39:19
more
39:22
text fields and we can keep track of
39:25
different text fields that we add guys.
39:27
It totally depends upon you how much you
39:30
need to add. Just let me show you
39:35
can simply add it right here.
39:48
>> [snorts]
39:48
>> So what
39:50
this becomes very much easy guys if you
39:53
want to do this and uh let me add a
39:56
shadow color
40:00
just align it properly
40:05
can control this using
40:21
uh let's suppose
40:27
you can see how beautiful it is looking.
40:29
You can see.
40:36
So you can customize it accordingly
40:38
guys. It totally depends upon you how
40:40
you want to do this.
40:49
So let's suppose if you want to delete
40:51
this element, there is also a delete
40:53
button. You can basically delete this
40:54
element. Let's suppose I don't want
40:56
this. I can simply click this and uh you
41:00
can even delete that also. You can even
41:02
add images, multiple images. You just
41:05
need to resize it. It's a fully Canva
41:08
clone guys and uh only a single HTML
41:11
file is there. You will basically see it
41:13
will contain all the source code and
41:15
about 379 lines of code is there. So if
41:20
you are interested the link is given
41:22
guys and thank you very much guys for
41:24
watching this video and I will be seeing
41:27
you in the next video and one more thing
41:29
you can export this to WEBP format as
41:31
well. You can see that webp format is
41:34
specifically made for web you can even
41:36
export this to PNG image as well. So
41:38
both the payment links are given guys in
41:40
the description and thank you very much
41:42
for watching this uh live stream and I
41:45
will be seeing you in the next one.