Up next in 10
Build a Canva Clone Image & Graphics Editor in Browser Using Fabric.js & Canvas API in Javascript
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-canva-clone-image-graphics-editor-in-browser-using-fabric-js-canvas-api-in-javascript/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:03
uh hello guys welcome to this video so
0:06
in this video I basically developed this
0:08
image canvas editor something like
0:12
canva which allows you to basically do
0:15
everything related to images so let me
0:18
select a
0:20
image so you will basically select any
0:23
image PNG or jpg all extensions are
0:25
supported so as you basically select
0:28
your image file the image will be shown
0:30
right here guys you will see that and
0:32
now you can actually overlay text and
0:35
Graphics you can draw on this image you
0:38
can basically add a watermark you can
0:40
draw shapes such as arrows rectangles
0:44
circles and you can change the color of
0:46
it as well something to Cana it's a
0:49
minimalistic client site fully client s
0:51
side no server s side code is involved
0:53
it works in the browser it's very fast
0:55
and efficient and you can basically see
0:57
it is coded entirely in HTML CSS and
1:00
JavaScript and it uses fabricjs do
1:03
library guys which is the open- source
1:05
image Graphics library of JavaScript and
1:08
here we have different options right
1:10
here that you can see in the user
1:11
interface we have option to actually
1:14
draw a line so we can see we can draw a
1:17
line here we can also change the color
1:20
using this Color
1:21
Picker can we we can basically draw
1:24
lines right here then we have the option
1:27
to actually draw a rectangle like this
1:30
this you can change the font
1:33
size you can draw a rectangle we can
1:36
even draw Circle as well you can change
1:39
the width to actually make it slightly
1:42
bigger there's option in the drop down
1:45
if you want a bigger thicker Circle you
1:48
can basically do it like this then we
1:51
also have the arrow if you want to add
1:54
some arrows we can even add arrows as
1:57
well like
1:58
this then we also have the like this we
2:02
we can add text as well so if you want
2:05
to add some Watermark of your company or
2:08
if you want to add text on top of the
2:10
images as overlay you can control the
2:13
width of the text and the phone size you
2:16
can see that so you can resize it and
2:19
click on apply and the text will be
2:21
added on the image
2:24
so if all the changes are done you can
2:26
simply export your image simply click
2:28
the export button and then this output
2:31
image will be downloaded with all the
2:33
modified changes that you have put to
2:35
place you can added shapes you added the
2:37
text different colors different shapes
2:40
different arrows after modifying it you
2:42
can simply export your image to Output
2:44
image file so the link is given in the
2:47
description guys you can directly
2:48
purchase this fully client side image
2:51
editor such as canva if you are
2:53
interested the link is given you will
2:54
actually get this directory zip file
2:58
after you make the payment on my my
3:00
website you will be automatically be
3:01
redirected to Google Drive where you
3:03
will be actually be getting this ZIP
3:05
file where you can actually get this ZIP
3:08
file you just need to extract the zip
3:10
file and you will actually get this
3:12
content this HTML CSS and JavaScript so
3:16
this entire application is coded using
3:18
HTML CSS and JavaScript no thirdparty uh
3:22
server is involved in it so it entirely
3:25
works in the browser so if you just open
3:27
your index.html file this is actual code
3:30
right here uh you just need to open with
3:32
live server and ordinary server can host
3:36
this application so if you have a real
3:38
domain name then you can simply deploy
3:40
this application very easily and user
3:43
will comes to your website they will
3:44
select the image and they will be able
3:46
to edit their images by drawing text on
3:49
the image if you if they want to add
3:51
some Watermark if they have a company if
3:55
you want to add some Watermark you can
3:58
change the color
4:01
you can see that using this color
4:06
fcker this is my channel name so what I
4:08
can
4:09
do I can place this anywhere else if you
4:13
want this you can resize it using the
4:18
mouse just place it
4:24
accordingly select your phone size
4:26
accordingly
4:36
so you can see that click on apply so
4:39
basically the watermark will be getting
4:42
added
4:43
so you can add multiple
4:50
text so multiple text you can add guys
4:53
and basically you can add lines you can
4:57
add a rectangle
5:00
multiple rectangles we can add we can
5:03
add circles as
5:09
well you can see you can edit anything
5:13
you can see that how easy it is and just
5:16
change the colors as well totally
5:18
depends upon you how you want to do
5:21
this and
5:23
uh we also have the undo and redo
5:26
options as well so if you basically done
5:29
something wrong you can undo or if you
5:32
want to redo something there is a redo
5:34
button as well so undo and redo buttons
5:36
are there if you want basically clear
5:39
everything there is a clear button is
5:41
also available if you click it
5:43
everything will go away so it is very
5:46
easy
5:48
so you can see that so these are all the
5:51
options which are there guys you can see
5:53
that
6:10
so you can basically see how easy it is
6:13
then you can simply export your work
6:15
it's a very good tool website guys and
6:18
which is similar to image canva clone
6:20
kind of editor that you have seen on
6:23
various uh internet so you can basically
6:26
purchase this source code guys the link
6:28
is given in the description
6:30
and uh you will be able to also see how
6:32
I coded this application which is you
6:35
will be getting to know about a lot of
6:37
things using fabricjs it's a very good
6:39
Library which makes it easy to actually
6:41
build these awesome applications related
6:43
to image and text you should just search
6:47
for fabric chairs the JavaScript canvas
6:50
Library HTML 5 it's open source library
6:54
and we are actually using this actual
6:56
library to for this application so if
6:58
you're watching it for the very first
7:00
time guys please hit that like button
7:01
subscribe the channel as well this is
7:03
actual Library HTML 5 canvas Library
7:06
which makes it easy to actually design
7:08
these canvas related applications which
7:12
uh here essentially what we are doing we
7:13
are essentially loading the image in the
7:15
canvas that you see if you load this
7:18
application the canvas is empty you can
7:20
see you can control the size of the
7:22
width and the phone size of the
7:25
text you can even add text right here
7:28
let's suppose
7:31
it if you don't want to edit images you
7:34
can also do this as
7:38
well you can change the
7:45
color so you can see that so you can
7:48
even basically construct images from
7:52
text as well from raw text if you don't
7:54
want to edit images you can basically
7:57
add text right
8:05
here so in the code you can also modify
8:08
the code basically you can
8:11
uh whatever you can modify the code as
8:14
well if you want to modify the canvas
8:17
size all these things you can modify it
8:20
if you want to do this uh if you know
8:23
some kind of coding if you are a web
8:26
developer if you are a programmer then
8:28
you can modify this application as well
8:30
after purchasing it you will get full
8:32
commercial right to actually modify
8:33
resell or sell this code to anyone other
8:37
as well you can earn revenue from this
8:39
code from this website tool website
8:42
essentially the feature is that you can
8:43
select images you can basically edit
8:46
images draw arrows draw text
8:50
uh the basic feature of this application
8:53
is that you can add text you can
8:56
basically add
9:03
the essential feature is that you can
9:04
add shapes you can add arrows you can
9:06
add text you can add graphics on top of
9:09
images and after that you can save this
9:11
image the essential use of this
9:12
application is that it's a simple image
9:14
editor which allows you to do all these
9:17
things Arrow text image color tangle so
9:20
drag drag and drop editor select your
9:22
image and then you can draw shapes to
9:25
everything it's a minimalistic
9:27
application guys and we are you can see
9:29
we are actually using the canvas and we
9:32
have different options that we have this
9:34
is entirely written in JavaScript we
9:36
have this canvas tag right here HTML
9:38
canvas tag and essentially we are
9:41
basically writing this JavaScript code
9:43
right here and uh we have different
9:46
buttons available for different things
9:48
to be there in the
9:49
application
9:52
so if you are interested
9:56
guys uh wasu podcast is saying that crop
10:00
we add cor sir uh essentially bro
10:03
cropping is not there in this editor you
10:05
can basically perform task related after
10:09
you select image you can add text you
10:11
can basically draw Circle it's a fabric
10:14
GS application you can draw shapes you
10:16
can draw rectangles and you can even the
10:20
basic uses is that you can add Watermark
10:22
if if you have owning a company you can
10:25
basically add Watermark you can control
10:27
the phone size
10:30
you can see that you can change the
10:32
color
10:37
accordingly you can place it accordingly
10:40
like
10:56
this so if you are interested guys the
10:59
link is given in the description you can
11:01
actually purchase
11:05
it it's a very good editor and
11:10
uh you can see that you can edit your
11:13
images PNG jpg
11:16
images please hit that like button
11:18
subscribe the channel and thank you very
11:20
much guys for watching this video and I
11:23
will be seeing you guys in the next live
11:26
stream until then thank you very much
#Photographic & Digital Arts
#Other
#Open Source