← Creative
📷
Photo Filter Lab
Upload a photo and manipulate it pixel by pixel — grayscale, sepia, invert, and beyond.
🟡 MediumDifficulty
3-4 hoursTime
JavaScript, TypeScriptLanguages
What you're building
A real image editor: upload any photo from your computer, and apply grayscale, sepia, invert, and brightness/contrast filters by directly reading and rewriting the raw RGBA pixel data of the image. This is genuinely how professional photo software works under the hood — you're not calling a pre-built 'grayscale' function, you're writing the pixel math yourself.
What you'll unlock 🔓
You'll need
- Basic JavaScript
- Canvas basics
- A code editor
- A browser
🗺️ Build roadmap
01 Let the user upload an image and draw it to canvas
→
02 Read the raw pixel data with getImageData
→
03 Implement a grayscale filter
→
04 Implement a sepia filter
→
05 Implement an invert filter
→
06 Add brightness and contrast sliders
→
07 Add a reset-to-original button and download
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free