<p>Have you ever wondered if it was possible to build an <strong>image editor</strong> with plain JavaScript?</p>
<p>Well, you're in luck because today I'm going to show you how to do it.</p>
<p><strong>No third-party libraries are required.</strong></p>
<p>Let's get into it.</p>
<h2 id="heading-how-will-it-work">How Will it Work?</h2>
<p>Good question. We'll be using HTML5 Canvas to store the image, and then, using the canvas context's <code>filter</code> property, apply different filters to the image.</p>
<p>These filters include things such as:</p>
<ul>
<li>brightness</li>
<li>saturation</li>
<li>blur</li>
<li>inversion</li>
</ul>
<p>See a list of all available filters <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter">here</a>.</p>
<p>We're going to be giving the user the option to decide which filters should be applied to the image, and how intense each filter should be. This is done by using <code>&lt;input type="range" /&gt;</code> as you can see below.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs7ssqvbuy645tes01cw.jpg" alt="Image Editor Screenshot" /></p>
<h2 id="heading-full-video-tutorialhttpsyoutubeeqgepw-gbw"><a target="_blank" href="https://youtu.be/e_QGePW-GBw">Full Video Tutorial</a></h2>
<p>You can find the source code and full video tutorial for this project on my YouTube channel, <a target="_blank" href="https://www.youtube.com/c/dcode-software">dcode</a>.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://youtu.be/e_QGePW-GBw">https://youtu.be/e_QGePW-GBw</a></div>
<p>Enjoy! 😎</p>


Have you ever wondered if it was possible to build an **image editor** with plain JavaScript?

Well, you're in luck because today I'm going to show you how to do it.

**No third-party libraries are required.**

Let's get into it.

## How Will it Work?
Good question. We'll be using HTML5 Canvas to store the image, and then, using the canvas context's `filter` property, apply different filters to the image.

These filters include things such as:

- brightness
- saturation
- blur
- inversion

See a list of all available filters [here](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter).

We're going to be giving the user the option to decide which filters should be applied to the image, and how intense each filter should be. This is done by using `<input type="range" />` as you can see below.

![Image Editor Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs7ssqvbuy645tes01cw.jpg)

## [Full Video Tutorial](https://youtu.be/e_QGePW-GBw)
You can find the source code and full video tutorial for this project on my YouTube channel, [dcode](https://www.youtube.com/c/dcode-software).

%[https://youtu.be/e_QGePW-GBw]

Enjoy! 😎

dcode's blog

dcode's blog

Build an Image Editor with JavaScript 🎨

How Will it Work?

Full Video Tutorial