Up next in 10
Build a Canva Clone Image Watermark Editor in Browser Using Canvas API in HTML & JavaScript
108 views
Jun 24, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-canva-clone-image-watermark-editor-in-browser-using-canvas-api-in-html-javascript/ Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:01
uh hello guys welcome to this video so
0:03
in this video I will show you a new tool
0:05
that I deployed on my website
0:07
freemediatools.com which is something
0:09
like Canva clone ultimate image
0:12
watermark editor where you can actually
0:14
add text and image watermarks let me
0:17
show you the tool on the laptop so let
0:20
me just share the screen here and just
0:23
visit freemediatools.com
0:26
and if you just search for this tool
0:29
here let me just search it
0:32
you will see this ultimate text and
0:34
image watermark editor if you go to this
0:37
tool the tool looks something like this
0:39
you can drag and drop your images or you
0:41
can simply click it to select the image
0:45
here
0:47
so just select your image whichever
0:49
image you want to add the watermark and
0:52
then we have different kinds of options
0:54
here uh we have two options either we
0:56
can add the text watermark or the image
0:58
watermark
1:00
so it's coded entirely in HTML CSS and
1:03
JavaScript and the link is given in the
1:05
description you can directly purchase
1:07
the full source code of this application
1:09
so after purchasing you will be getting
1:11
the this zip file which will contain the
1:14
single index html file here so let me
1:18
show you the source code of this you can
1:20
see it's almost uh around about 638
1:24
lines of code here it's entirely works
1:27
in the browser it's a static tool and
1:29
now let me show you the functionality of
1:31
the tool right here so where we have a
1:33
button here of preview watermark if you
1:36
click this the watermark by default will
1:39
appear like right here you can edit this
1:41
watermark here by simply let me change
1:44
it to my channel name here which is
1:46
coding six so after you make the change
1:49
just click this button and it will apply
1:51
the changes here you will see the
1:53
watermark will be added right here at
1:55
the bottom
1:57
uh bottom right position you can control
1:59
the position here we have this color as
2:02
well you can change the color of the
2:04
watermark if you see click on that now
2:07
the color will change here to red you
2:09
can even control the phone size if you
2:11
want larger font you will control this
2:14
and you can even control the position so
2:17
we have different positions right here
2:19
bottom right bottom left top right top
2:21
left and center let me put it the
2:25
watermark in the center position so you
2:27
will see that now it will put it in the
2:29
center we can even control the opacity
2:31
as well of the watermark by this slider
2:35
so if I make this click on that and now
2:38
the watermark appears like this after
2:41
you make the modification we have this
2:43
button here download watermark image and
2:46
you simply click this and your watermark
2:49
will be applied and you can see on the
2:52
image it's very simple application it
2:55
runs entirely in the browser no server
2:57
side code is involved
2:59
and you can even change the font as well
3:04
you can see that
3:07
and you can control the opacity as well
3:11
and now if you want let's suppose you
3:14
want the image watermark you can select
3:16
this portion here now here you need to
3:19
select your watermark image that needs
3:21
to be applied
3:23
so here you can select any image for
3:25
your choice let's suppose I select this
3:28
and now the watermark image appears
3:30
right in the center position right here
3:32
if you see you can control the size of
3:34
this image like this it will appear
3:37
larger and you can control the opacity
3:41
just click that and now you can see the
3:43
image is overlaid on top of this image
3:46
and you can even control the margin as
3:48
well like this position if you want it
3:51
to at the bottom right position you can
3:53
put you can select any position of your
3:56
choice here bottom left bottom right all
3:59
these positions are supported so
4:01
definitely check out this tool before
4:03
purchasing it i have basically at the
4:04
checkout page I've given this tool link
4:07
so if you are interested then you can
4:10
directly purchase it after purchasing it
4:12
you will get this zipped file which will
4:14
contain this single index.html file and
4:17
uh you can even modify this source code
4:19
to add additional features as well so
4:21
once you get the source code you can see
4:24
it's entirely coded inside HTML CSS and
4:26
JavaScript so it is using the canvas API
4:30
which is available directly in the
4:32
browser to make these watermark and
4:35
again if you click this your image will
4:38
be applied here you will see as a
4:39
watermark here so it's a simple Canva
4:42
clone image watermark editor we can have
4:45
text watermark we have image watermark
4:48
as well you can control all these
4:50
parameters such as the size of the
4:52
watermark the position the opacity
4:54
margin everything you can control that
4:57
and with live preview as well so you get
4:59
a live preview and then you get a
5:01
download button to actually download
5:03
your watermark image
5:06
same goes with a text watermark as well
5:08
so just click it and you can actually
5:11
control everything here the position of
5:14
the text you can apply this definitely
5:17
you can try this tool before purchasing
5:20
it the source code of this
5:23
so thank you very much guys for watching
5:25
this video and please hit that like
5:28
button subscribe the channel as well and
5:30
I will be seeing you in the next live
5:33
stream
#Freeware & Shareware
#Multimedia Software
#Software