Up next in 10
Build a Canva Clone Thumbnail Generator Web App in Browser Using FabricJS in HTML5 & Javascript
Dec 13, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-canva-clone-thumbnail-generator-web-app-in-browser-using-fabricjs-in-html5-javascript/
Show More Show Less View Video Transcript
0:00
Uh hello guys. Today in this tutorial I
0:02
basically build out a Canva clone to
0:05
create social media
0:08
uh thumbnails for Instagram, Facebook,
0:11
YouTube, any social media uh template
0:14
you can create with this awesome tool
0:16
that I developed guys in the browser.
0:18
You you just need three technologies
0:20
HTML, CSS, JavaScript to learn this. And
0:24
I will be giving you this uh tool with a
0:26
little bit of price. The link is given.
0:28
You can directly purchase this source
0:30
code and the web app. Let me show you
0:32
the demo here. So you can see that guys,
0:34
I'm running this on my local host. You
0:36
can even deploy this application on your
0:38
website as well. So let me just refresh
0:40
this application. Uh let me show you the
0:44
demo here where I'm running this. This
0:47
is my index.html. So if I basically open
0:50
this with live server. So this is you
0:52
can see that guys
0:54
uh it is now running it on localhost
0:57
5500
1:00
and you can see guys uh if I zoom in
1:02
basically we have uh a input box here we
1:06
can here write here any template size
1:09
you can uh 1280 into 720 this is for
1:12
YouTube and you can Google it we have
1:15
also got a download button where we can
1:17
download as a PNG image and here this is
1:20
our canvas those guys basically here we
1:23
can uh do our drawing so let's suppose I
1:27
want to draw something here write
1:29
something
1:31
I will say here my channel name coding
1:33
six so let me change this to 1280 into
1:38
720 you can see that guys I'm as I'm
1:41
changing the size here the canvas size
1:43
is changing automatically so with live
1:45
preview so it is a little bit like canva
1:49
it if you open canva com also you just
1:52
need to provide the custom dimensions
1:54
and it will basically give you the
1:56
custom state to your Canva and there is
1:59
also some ratios which are given right
2:01
here very specific sizes templates 1 by
2:04
1 you can even 4x 100 4x 100 4x3 it's
2:10
for Instagram guy it's a very good
2:11
format if you want to put out Instagram
2:14
thumbnails then we have got some presets
2:18
which is vlog and then for 16x9 which is
2:22
YouTube. So I will once again do it 1280
2:26
by 720. And then comes the fun part
2:30
guys. If you see guys basically we have
2:32
a background color picker. We have also
2:35
got red gradient color. We can even
2:37
apply. If I change the color here to red
2:40
color. You can see that you can you can
2:42
pick any color of your choice guys
2:45
depending upon. You can even pick
2:46
gradients as well. You can see that and
2:50
uh there is this text size. We can
2:53
basically choose any font here.
2:57
And here we can even add images as well
2:59
guys. So let's suppose you can add
3:01
multiple images. So whichever image you
3:05
can add you can let me add like this.
3:07
You can place this image accordingly. So
3:10
you can see there's also a cross button
3:12
as well for every widget out there. So
3:15
you can control it whether to add this
3:17
or not. So this image we can remove this
3:20
image by clicking this cross button.
3:22
Again we can add this image in the
3:24
canvas like this. And here we can the
3:27
control where to place this image. Let's
3:29
suppose we want to place this image like
3:31
this. We can change the size like this
3:35
guys. All the controls are there guys in
3:38
the it's a fully fledged editor Canva
3:42
editor to basically make the thumbnails.
3:44
You can place the text right here.
3:47
You can increase the size of the text
3:54
and uh just select the text here.
3:59
You can change the text size here. Let
4:02
suppose I change it to 98. You will see
4:05
that the text size will change here. Um
4:09
you can see like this. So this looks
4:11
quite good guys. You can see that you
4:14
can uh pick any font of your choice. It
4:16
totally depends upon you. So various
4:19
fonts are given right here. You can see
4:22
this fonts. I think it's look good. And
4:26
then
4:28
we can even add some more images as well
4:30
guys. We can cross this. So now if you
4:33
want to export you can simply click the
4:35
download button guys. So the PNG image
4:37
would be downloaded and this is your
4:39
thumbnail which is ready guys. So it's a
4:42
very good tool guys something like
4:44
Canva. If you open canva.com you will
4:47
see this will be the interface if you
4:49
want to design a thumbnail.
4:53
It's a minimalistic Canva clone. You can
4:55
make it in the browser. It's a very good
4:57
you can change it
4:59
the gradient. It's totally you can see
5:02
it's totally made it in the browser. If
5:04
I show you the directory structure after
5:06
you basically purchase it, you will get
5:08
this source code guys. This is the CSS
5:10
code directly. You just need to uh after
5:13
purchasing it, you just need to deploy
5:15
this source code on your website. You
5:17
can earn a lot of revenue as well from
5:19
AdSense is like many website visitors
5:21
which come here and there this is a
5:24
JavaScript minified code is there. This
5:26
is the HTML code is there. So that's
5:29
all. After that you just need to open
5:31
this in the browser and here you can
5:33
make your
5:35
you can uh also upload a background
5:37
image as well guys. Let's suppose if you
5:39
want to add a background image you can
5:42
add this background image like this.
5:45
In this case we have the editor that's
5:48
why we need did not have to add. So what
5:52
I can do?
5:57
So [snorts] you can even add background
5:59
images as well guys like this. It
6:01
totally depends upon you if you need or
6:04
not.
6:07
So it's a great great tool guys. The
6:09
link is given. If you need this source
6:11
uh this tool, you can go to the
6:13
description and basically here you can
6:17
even change the text color. You can make
6:19
the bold color as well. You can add a
6:21
text accordingly. You can do it.
6:27
There are various layouts which are
6:28
supported guys. You will see that there
6:31
is underline all that stuff.
6:35
Various templates are there. So it
6:38
totally depends upon you how you need to
6:41
do that. So it's a fully fleshed uh
6:44
Canva clone editor to make thumbnails in
6:47
the browser with this interface. So
6:50
thank you very much guys for watching
6:51
this video and I will be seeing you in
6:53
the next video and basically all the
6:55
links are given guys. You can go to the
6:57
stripe to purchase it in Indian rupees
6:59
and PayPal as well to purchase in uh
7:02
United States dollar. So, check the
7:04
description to buy the full source code
7:05
and I will be seeing you in the next