Up next in 10
Build a Angular Canva Editor Clone to Create Video & Image Thumbnails Using Fabric.js in Browser
Dec 13, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-angular-canva-clone-to-create-video-image-thumbnails-using-fabric-js-typescript-in-browser/
Show More Show Less View Video Transcript
0:00
Uh hello friends. Today in this tutorial
0:02
I will basically show you how I built
0:04
you a Canva clone thumbnail editor where
0:08
you can basically make your YouTube
0:10
video thumbnails, Facebook video
0:11
thumbnails or Instagram video
0:13
thumbnails. So in the browser itself
0:15
using Angular and we are using fabricjs
0:17
library which is a open-source animation
0:19
library or graphics library in
0:21
JavaScript. So you can see the interface
0:24
of this application right here and uh
0:26
you can basically make your thumbnails
0:28
uh you can have your width and height
0:30
just provide
0:32
the size of the thing. So let's suppose
0:34
we are making uh 500 width and the
0:38
height of the thumbnail will be also
0:41
300. So it will automatically resize in
0:44
the preview panel. So we will also be
0:46
seeing the live preview of the what we
0:48
are making. So we can enable the free
0:50
drawing mode. So this is the actual
0:52
check bar here. If you enable this, we
0:55
can draw something on the canvas and uh
0:58
whatever we draw, we can export this to
1:01
a actual image file. So now it has been
1:03
exported to a actual PNG image. So it is
1:07
transparent. The white background is not
1:09
showing right here because if you want
1:11
to provide a background color, you can
1:13
change this background color to any
1:15
color.
1:18
And uh now if I export to image your
1:21
background will be shown to you. So in
1:23
this easy way you can draw something and
1:26
export it to image file. You can even
1:29
export it to SVG as well. Your SVG file
1:32
has been downloaded. You will see that
1:33
SVGs are scalable vector graphics which
1:36
are only applicable in the browser
1:38
itself. So your SVG you can export them
1:41
into SVG as well. And then we can clean
1:45
the canvas if you want to show. You can
1:47
see your canvas has been cleared. And
1:50
now let me show you some more options.
1:52
You can even add some text as well. If
1:54
you want to add some text,
1:56
you can have this plus icon here. You
1:59
can add some text as well.
2:01
You can disable this. And now you can
2:03
select this text, place it anywhere else
2:07
if you want to make a thumbnail. And
2:09
then we have the functionality to
2:11
basically upload some image files as
2:13
well. So let's suppose
2:16
I want to add this image. So what I will
2:19
do? I will simply click it. So now this
2:22
image is added to the canvas. We can
2:24
resize this image like this. And after
2:27
that simply provide some background
2:29
color to this image.
2:31
So now your thumbnail is ready. We can
2:33
export this image. You will see that the
2:35
image has been exported. So in this easy
2:37
way guys, you can make your thumbnails
2:39
for your YouTube videos. It's a very
2:41
good alternative to Canva because Canva
2:45
requires internet and it is also very uh
2:48
very I will not say expensive but still
2:51
it is a very advanced tool for
2:53
beginners. But this tool that I
2:55
developed in Angular makes it very easy
2:57
for a beginner as well. So to use to
2:59
make thumbnails as well. So you can
3:01
export this to SVG as well. Your XVG
3:03
file is also downloaded and uh you can
3:06
basically say change this text anywhere.
3:11
You can add multiple text here. Simply
3:14
click on text and now you can
3:19
simply select this. Just drag this.
3:24
It's very easy. You can see that. So you
3:27
can add multiple text, multiple images
3:29
as well.
3:31
You can see that. So
3:34
you can change this image to any image
3:36
of your choice.
3:42
Just add this image now. So now this
3:44
image has been added. So you can add
3:45
multiple images, multiple text. So this
3:48
totally depends upon your c creativity
3:50
guys how you want to design your
3:52
thumbnail. So you can increase the
3:54
height as well. So this will happen
3:55
instantly after you just change the
3:58
height. You don't need to uh delete your
4:01
previous work. This will increase the
4:03
height so that you can basically do this
4:06
stuff accordingly.
4:09
So you can see that how easy it is. Now
4:12
if you export this your height will be
4:14
increased. You can see that the
4:15
thumbnail height is increased. So we
4:17
have coded this inside the angular guys.
4:20
If you you can even add uh these
4:22
stickers if you want to do this. So in
4:26
the code you can add some more stickers
4:28
download it from Google and then add
4:30
this inside your application. So this
4:32
application I'm giving you guys the
4:34
links are given in the description of
4:35
the video. You can go to PayPal and make
4:37
the payment in United States dollar or
4:40
you can go to Stripe and make the
4:42
payment in Indian rupees. So both the
4:44
payment links are given in the
4:45
description of the video. After you make
4:47
the payment you will get this zip file.
4:49
You just need to extract this and then
4:51
you will get this directory structure
4:53
and in the package.json JSON file. Let
4:54
me show you. We are using uh this
4:56
Angular library. You can see that we are
4:59
using Angular and then we are using
5:02
Bootstrap as well for the UI and then we
5:04
are using FabricJS which is an
5:06
open-source image library in JavaScript.
5:09
Fabric JS phone for the icons and GX
5:13
color picker. We are using this RJX TSL
5:16
we have. This is coded inside TypeScript
5:20
not JavaScript. As you see in angular we
5:23
code inside uh Typescript. So we have
5:26
also used some SAS as well for applying
5:28
some styles. So this is our application
5:31
and uh the links are given the payment
5:33
links are given. After that you will
5:35
just need to restart your server. We
5:38
started this server. You will see it is
5:40
hosting on localhost 4200. If I show
5:44
you. So localhost 4200. This started on
5:48
local host 4200.
5:50
So we have different options as well. If
5:54
you want to select a element,
5:58
you can delete that element. If you
6:00
select them, you can delete them like
6:02
this. Simply select and delete them. You
6:05
can just
6:08
simply select delete. Simply select
6:10
delete. So in this way guys, you can add
6:14
elements, delete elements. We also have
6:18
uh the option to clone an element as
6:20
well. Let's suppose you create a text
6:22
right here. You want to clone this. We
6:25
can simply copy this.
6:28
Simply say clone.
6:36
You can resize this first of all. And
6:45
we also have the send to send to front
6:48
and send to back options as well. Let's
6:50
suppose we have a image file. We add
6:53
this image file. So now you want this
6:55
text to be showing
6:59
uh in top of the image. So what I will
7:01
do is that basically I will move this
7:03
image to the back. So send to back. I
7:07
will put this option here.
7:10
Select this option. Move to up. So now
7:13
you can select your text on top of the
7:15
image. So here you can change the
7:18
background color to whatever background
7:20
color that you want.
7:27
You can even bring uh object uh
7:31
background image as well. Let's suppose
7:33
I go to a site pixabay.com
7:37
and uh if you want to basically
7:40
have a background image, you can copy
7:42
image address and then bring that image
7:46
in the canvas. Simply press enter and
7:50
that image will be bring right here. You
7:51
will see that. So this image has been
7:54
brought from pixabay.com and we simply
7:56
copy pasted the address of that image
7:59
and now this image has been replaced as
8:01
a background image. So now you can
8:04
simply download the thumbnail. So it's a
8:06
very utility way guys application in
8:09
order to just uh increase the speed of
8:12
making thumbnails for your post social
8:16
media posts. It can be videos, it can be
8:19
any
8:21
post that you upload to Facebook,
8:23
Instagram or YouTube. It's a Canva clone
8:26
and uh it is very good for making
8:29
thumbnails with live previews. So in the
8:31
browser in Angular. And thank you very
8:34
much guys for watching this video. All
8:36
the payment links are given in the
8:38
description of the video and I will be
8:40
seeing you in the next video.