I implemented a few image filters using a canvas element.
Normally we don’t need to implement our own image filters. Photoshop does a way better job than we could. But someone has to build Photoshop and the camera app on our phones, right?
As a web developer it might also be interesting to know how filtering actually works. It might be helpful to understand the tools you work with and image filters are available in our browsers via SVG and CSS.
Here are some basic filters implemented manually with just Javascript and the <canvas> element:
You can test the different filters and look at the code. It might surprise you how simple this actually is. Feel free to play around and create some awesome filters. Maybe the next Instagram will be a web app.
