In this JavaScript Photo Filter App tutorial, I will teach you how to:
- upload and display images using JavaScript and the canvas element
- access and manipulate the pixels of the image with JavaScript
- download edited images

Source Code:
CodePen: https://codepen.io/patriciamolnar/pen/ExLgoZL

Resources:
HeroIcons: https://heroicons.com/
Canvas API: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
canvas.getContext(): https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
JavaScript File Reader: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
RGBA colours: https://www.w3schools.com/css/css_colors_rgb.asp


Watch some of my other frontend tutorials:
- JavaScript game tutorial: Build a number memorising game:
https://youtu.be/hZ05_Tju4ps

- SVG animation: animate an SVG with CSS and JavaScript:
https://youtu.be/eSpHvESNcZQ

- CSS text animation with variable fonts:
https://youtu.be/JbjA4oE4Ma4

I am also on social media, so feel free to connect and reach out:
Twitter: https://twitter.com/pmcoding
CodePen: https://codepen.io/patriciamolnar
Github: https://github.com/patriciamolnar

Show more