Up next in 10
Build a Canva Image Blur Editor to Blur Images Using Magic Brush in Browser Using HTML & JavaScript
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-canva-image-blur-editor-to-blur-images-using-magic-brush-in-browser-using-html-javascript/
Show More Show Less View Video Transcript
0:00
show you a canva style image blur editor
0:03
that I developed directly in the browser
0:05
using HTML, CSS and JavaScript. So this
0:08
is the actual interface of the
0:10
application. I've also given the demo
0:12
link at the checkout page. You can go to
0:14
the description link.
0:17
So this is the actual editor. So once
0:19
you land on this, you simply select your
0:22
image. After selecting the image, the
0:25
image will get loaded in the browser. So
0:27
here you can adjust the brush size, the
0:31
blur strength. So if you want to make it
0:34
bigger, you basically make it bigger.
0:36
And now if you want to blur out this
0:38
portion, you simply do this. And now you
0:41
will see exactly the image is
0:43
successfully blurred. And then you have
0:46
the download button. And then simply you
0:49
download this image. So this makes it
0:51
really easy. It's similar to Canva image
0:54
blur editor. So this is the output
0:57
result you get very simple static web
1:01
application single page tool. This is
1:04
the actual source code. If you want to
1:06
purchase it I I have given the source
1:11
code in the description of this video
1:13
you can directly purchase it. So this is
1:16
a single index html file.
1:20
So
1:22
as you can see here this is the overall
1:24
source code here about several hundred
1:26
lines of code. It is having almost all
1:29
HTML, CSS and JavaScript. You can run
1:32
this locally in the browser
1:36
as you can see here.
1:39
So again you repeat the process. It
1:41
doesn't matter. It can contain multiple
1:44
persons as well. You basically load the
1:47
image, adjust the brush size
1:51
and just so it's very easy as you can
1:54
see using your mouse you can blur out
1:56
the portions that you don't need and uh
2:00
then click download and same thing
2:04
happens you will see it has blurred out
2:06
those portions it's a really simple
2:10
editor similar to Canva image blur kind
2:13
of a can even adjust the blurs
2:15
strength as well. If you completely want
2:18
to hide, you can even do that as well.
2:20
So using these sliders, the strength of
2:23
the blur, the size of the brush. So it's
2:26
a brush based editor where you make use
2:29
of the brush to blur or hide specific
2:32
parts of the images. So it's a single
2:35
page application really simple.
2:38
It doesn't have a back end. It's
2:40
completely a static app
2:43
inside HTML, CSS, and JavaScript. You
2:46
pick up your image just
2:54
like this. Really simple. It will save
2:56
you a lot of time as well. So many times
2:59
we do need to blur out specific parts of
3:02
the images. This is the overall source
3:04
code. You directly purchase it. the link
3:08
I have given in the description of this
3:10
video. It bas basically we are using
3:12
opensource uh canva canvas API for
3:16
building this editor directly in the
3:18
browser.
3:22
So before purchasing it you can check
3:24
out the live demo. I've given this live
3:27
demo in the
3:30
so once you land on the page you will
3:32
see the live demo link as well. So you
3:35
can check out the demo
3:38
and the moto is very simple. You upload
3:41
image. The image is not uploaded.
3:45
The processing is entirely happening at
3:47
the server side. So no nothing is
3:49
uploaded. It is this application is
3:52
doing its job directly in the browser.
3:57
It's really easy as you can see.