Up next in 10
Build a Canva Clone Image to Pencil Drawing Sketch Editor in Browser Using HTML & JavaScript
Jun 26, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-canva-clone-image-to-pencil-drawing-sketch-editor-in-browser-using-html-javascript/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:04
uh hello guys welcome to this live
0:06
stream so in this live stream I will
0:07
show you a uh tool that I developed here
0:10
which is actually a Canva clone uh it
0:13
actually transforms your image into a
0:15
pencil sketch pencil drawing sketch it's
0:18
a little mini editor so here you can
0:21
select your image it it will turn that
0:24
photograph into a pencil drawing sketch
0:27
with the advanced filters available so
0:30
this is I have deployed this on my
0:31
website freemediatools.com so this is
0:34
actually the user interface which looks
0:36
something like this so here you will
0:38
choose your input image whichever image
0:41
you want to
0:43
select here so let me select the image
0:46
here
0:51
so you will see it will transform your
0:53
image uh the original image looks like
0:55
this on the left hand side and on the
0:57
right hand side you will see it will
0:59
transform this image into a pencil
1:01
sketch pencil drawing sketch and then we
1:04
also have on the left hand side we have
1:06
a little bit of filters available we can
1:10
have sketch effects you can apply the
1:12
charcoal effect here ink drawing effect
1:16
so by default pencil sketch is selected
1:18
you can select the intensity of this
1:19
pencil sketch using the slider
1:23
if you increase the slider the pencil
1:25
sketch will be dark
1:28
you can adjust also the contrast level
1:30
as well
1:32
as you do this on the right hand side
1:34
you will see the it will automatically
1:37
live preview it will show you the
1:38
changes you can adjust the brightness as
1:41
well you can even put a blur effect as
1:42
well
1:44
so whenever you are okay we have this
1:46
download button if you download this you
1:49
will see it will download your output
1:51
image
1:53
so I have basically constructed this
1:56
canva clone entirely in the HTML CSS and
1:59
JavaScript so it's a static tool if you
2:02
need the source code of this the link is
2:03
given in the description you can
2:05
directly purchase the full source code
2:07
after purchasing it you will get this
2:09
single index.html file here so it
2:13
contains this all this code in a single
2:15
file and it's containing HTML CSS and
2:18
JavaScript so we haven't used any third
2:20
party library for this you can see
2:22
almost 8,000 lines of source code you
2:25
will get after you purchase it you will
2:27
easily modify this you will add
2:29
additional functionality as well and
2:32
easily you can run this locally as well
2:34
inside your VS code so as you can see
2:36
now we are running it on locally again
2:39
you repeat the same process you can
2:40
select any image and after selecting
2:43
that image
2:46
it will transform this
2:50
to a pencil sketch you can adjust all
2:54
these features the contrast level the
2:57
brightness everything
3:03
you can even apply the blur effect we
3:05
also have various filters as well
3:07
additional filters similar to Canva
3:09
which we can apply here to our pencil
3:11
sketch
3:14
can see that can download that so if you
3:17
need this Canva clone pencil to pencil
3:21
sketch editor you can directly purchase
3:23
this the link is given in the
3:24
description it's entirely coded inside
3:26
HTML CSS and JavaScript
3:29
you can try this with many filters here
3:32
you can see you can play with this tool
3:35
and transform your image to a pencil
3:37
sketch very easily using this tool so
3:42
it's entirely coded inside HTML CSS and
3:44
JavaScript so this is the source code
3:47
you can easily modify it just look at
3:49
how I coded this after you purchase it
3:51
you will easily get it so at the
3:53
checkout page I've given this link of
3:56
this tool so before you purchase it you
3:58
can even try this so if you are
4:00
interested you can directly purchase it
4:03
so it will transform your photograph
4:04
into pencil sketches so thank you very
4:07
much for watching this video and I will
4:10
be seeing you in the next one