Up next in 10
Build a Canva Graphics Clone Editor in Browser Using Fabric.js & Canvas API in Javascript
Dec 13, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-canva-graphics-clone-editor-in-browser-using-fabric-js-canvas-api-in-javascript/
Show More Show Less View Video Transcript
0:00
Uh hello friends, today in this tutorial
0:02
I will basically show you a application
0:04
that I developed which is similar to
0:06
Canva which is basically a graphics
0:10
editor where you can build out
0:12
thumbnails for your YouTube videos or
0:15
Instagram or Facebook.
0:18
So this is basically a canvas editor
0:20
similar to Canva. And uh here you can
0:23
basically create graphics, images and
0:26
save it as PNG, SVG and JPG. This is
0:30
kind of an interface right here. And
0:32
this is actually a canvas right here and
0:35
uh basically you go to the settings
0:38
panel here. So various options are
0:40
there. First of all, now to change the
0:41
background color of the canvas, it is
0:44
transparent here. So now to change it to
0:46
red suppose I need to change it to red
0:48
color or any of the colors I can
0:50
basically choose a color picker similar
0:53
to canva we have color picker out there.
0:56
So you can choose your favorite color
0:58
from here from either you can choose a
1:00
solid color or you can choose a gradient
1:02
color as well like this radial like
1:06
this. So let me choose a solid color.
1:10
This is the color that I choose. So
1:13
something like this. And we can even
1:16
control the width and the height as
1:18
well. Let's suppose you are building a
1:20
thumbnail for your YouTube video. So the
1:22
width will be 1280 and the height will
1:25
be 720. So here you can control the
1:28
canvas width and height. So now you can
1:30
even control the zoom level as well. So
1:33
75% looks good. So you can just hide
1:36
this. So this is basically your drawing
1:38
canvas. So here you will draw something
1:40
on the screen. So here we can also draw
1:43
something text here.
1:46
So we can basically say here.
2:02
So you can see we can draw something
2:04
text right here. We can change the font
2:06
family of the text. Just select your
2:10
text and change the font family
2:13
accordingly.
2:15
And we can even change the font size
2:18
like this guys using this uh plus icon.
2:22
And if you do this the font will the
2:26
font size will change. You can even
2:27
change the line height as well.
2:31
You can even provide random values here.
2:34
Just
2:35
provide this 10 like this and letter
2:40
spacing values you can even provide.
2:43
You just need to select it first of all
2:47
like this. Text alignment you can
2:49
control either you can align the text in
2:52
the center position.
2:54
Just select the text
2:56
like this. And then we can even change
2:59
the text color. You can control the
3:02
color of the text accordingly.
3:09
So we will also choose the black color
3:12
which looks good.
3:15
So you can even provide a border as
3:17
well.
3:26
The color of the border you can control
3:28
like this. how you want to choose this.
3:34
You can see.
3:37
So I think
3:40
two looks good.
3:44
We can even undo redo as well. If you
3:46
made some mistake here, if you want to
3:49
undo and redo the things here, you can
3:51
even do this also by using undo and redo
3:53
buttons at the top. Let me refresh this
3:57
and once again change the thing here.
4:00
And now if you want to basically add a
4:02
image from your local directory, we can
4:05
even add a image as well. So you can
4:07
drag and drop your JPG, PNG or SVG
4:10
files. So
4:13
if I would need to add some images.
4:18
So you can see we can easily
4:21
drag drop images and then we can resize
4:23
the images like this. And then we can
4:25
add some text
4:29
right here. So in this way you can make
4:32
your
4:34
thumbnails very easily quickly using
4:36
this editor and it is available. It's a
4:40
completely offline editor which I coded
4:42
inside JavaScript and it works in the
4:44
browser. You can see I'm running this on
4:46
localhost
4:48
HTML. So no
4:51
uh serverside code is involved. It's
4:52
completely written in JavaScript code
4:55
and uh it is very handy.
5:04
So it's a very good uh
5:09
Canva clone something like this. If you
5:11
want to construct your own make your own
5:15
thumbnails, it's very good.
5:22
You can see that. So if you are happy
5:23
with your design, you can export this.
5:26
So now there is also export option which
5:28
is a download option. You can download
5:31
your thumbnail. So three options are
5:33
there guys. SVG, PNG and JPG. You can
5:36
export it to as SVG file as well which
5:39
is a scalable vector graphics. If you
5:41
open this, this will export this into
5:44
SVG. Very simple. And then we have also
5:47
a option to export it as a PNG file. So
5:51
this thumbnail is saved right here as a
5:54
PNG or we can export this in the JPG
5:57
file. So depending upon which file you
5:59
need to export it to, you can simply
6:02
click the button and it will export the
6:04
design. And if you're not happy with the
6:06
the settings, you can alter the settings
6:09
of the canvas. Change the background
6:11
color very easily and the design will
6:15
take place. So
6:17
you no longer need to use Canva guys for
6:20
these simple thumbnails. You can use
6:22
this uh editor. And also we also if you
6:26
want to draw something using a pencil,
6:29
you can even draw that also. If you want
6:32
to highlight something, we can change
6:34
the color of the brush. If I change this
6:37
to like this, we can. If you want to
6:39
underline something, you can see that we
6:42
are underlining something.
6:45
If you want to change the brush size, uh
6:47
the brush size will increase.
6:49
You can see that now.
6:53
So all the source code guys, if you want
6:55
to purchase the this application, the
6:57
links are given in the description of
6:58
the video. uh you can purchase the full
7:00
source code of this application. You can
7:02
go to PayPal and make the payment in
7:04
United State dollar or you can go to
7:06
stripe and make the payment in Indian
7:08
rupees. So both the payment links are
7:09
given in the description of the video
7:11
and after you purchase the source code
7:13
guys you will basically get a zip file
7:15
which will actually contain this uh
7:19
files
7:20
a index html file will be there. If you
7:23
open this file in a in your server open
7:26
with live server this application will
7:28
open. So very handy application after
7:31
payment you will get these files. You
7:33
just need to deploy this application.
7:35
You you will get these files and you can
7:39
directly upload your this application in
7:42
your own website as well. So we we can
7:45
draw we can also draw a circle like if
7:48
you want to highlight something you can
7:50
see that you can see you can undo redo
7:55
uh we also have the spray as well if you
7:58
change the color
8:00
we also show the spray
8:07
you can see so we are doing spray here.
8:13
So the limits are endless guys. If you
8:16
are a good graphic designer then you
8:18
will love this tool because you can do
8:21
unlimited number of things using this
8:22
tool. We can even draw some shapes as
8:25
well. Let's suppose you want to draw
8:27
something on the text. You can draw some
8:29
shapes as well using this tool like
8:32
this.
8:34
And then you can select this tool using
8:36
the select tool and just you can change
8:41
the background color like this. You can
8:44
see how beautiful it is looking.
8:48
And uh
8:52
we also have you can draw some more
8:54
shapes as well. You can see various
8:56
shapes are available to you. These
8:59
shapes are very much helpful if you want
9:01
to draw graphic designing. So
9:05
we also draw we can also draw some lines
9:08
as well.
9:11
You can see how we can draw lines.
9:15
So we have draw a shape right here. If
9:17
you see now we can select this shape
9:23
and change its background color as well.
9:26
You can control like this. We can also
9:29
draw lines like you can see.
9:36
So
9:37
random lines as well we can draw
9:42
and we can add multiple images as well.
9:45
So if you want to add uh some more
9:48
images we can also draw some more
9:50
images.
10:03
If you want to delete this, you can undo
10:06
this.
10:12
So in this way guys, you can uh add
10:15
multiple images. It totally depends upon
10:17
you. You can see we have added multiple
10:20
images here, multiple text. So if you
10:23
need this tool guys, the links are given
10:25
in the description of the video. All the
10:27
payment links. I coded this entirely in
10:29
JavaScript. It's a Canva clone graphics
10:32
editor where you can basically make
10:34
thumbnails for your YouTube videos or
10:36
social media templates for Facebook,
10:38
Instagram. So everything is customizable
10:41
here. We can change the background
10:42
color. Everything you can see that with
10:44
a single click. You can control the
10:46
canvas size as well. If you want to do
10:49
200 width, 200 height.
10:53
So all customizable. You can see that.
10:55
So with a single click.
11:02
So it's a very handy tool guys. So if
11:05
you're interested, you can go to the
11:08
description and copy paste all the oh
11:10
sorry
11:12
buy the full source code and you will
11:14
actually get this directory structure
11:16
after you purchase it. You will get a
11:17
zip file. You can extract it and then
11:20
open the index html and open with live
11:23
server and you will get this
11:25
application. So please hit that like
11:27
button, subscribe the channel and I will
11:29
be seeing you in the next video.