Photo Editor

Basic photo adjustment tools have existed in some form since the earliest photo-editing software, and the six adjustments here — brightness, contrast, saturation, grayscale, sepia and blur — cover the core set that accounts for the overwhelming majority of quick, everyday photo touch-ups: correcting a photo that's a little too dark or washed out, converting a color photo to black-and-white or a warm vintage sepia tone, or softening an image slightly. What makes this implementation notably simple and robust under the hood is a specific, deliberate technical choice: rather than manually reading and rewriting individual pixel values (the traditional approach, using `getImageData()` to pull out every pixel's red/green/blue numbers, running arithmetic on each one by hand, then writing them back with `putImageData()`), this tool uses the canvas 2D context's built-in `filter` property — the same CSS `filter` syntax used to apply effects like `brightness()`, `contrast()` and `blur()` directly to images and elements in ordinary web pages, applied here to a canvas drawing operation instead. This matters for two concrete reasons. First, correctness: the browser's own, heavily-optimized, spec-compliant filter implementation handles all six effects — including the trickier ones like blur, which genuinely requires sampling and averaging many neighboring pixels together, not just adjusting one pixel's own numbers — in a way that's guaranteed to match how the same `filter` values would render anywhere else in a browser, rather than trusting a hand-written pixel loop to reimplement that math correctly (getting brightness/contrast/saturation formulas subtly wrong, or writing a slow, naive blur, are both easy mistakes when rolling this by hand). Second, performance: filters are applied by the browser's own rendering engine in one pass at draw time rather than in a JavaScript loop iterating over every pixel individually, which stays fast even on a large photo where a hand-rolled per-pixel loop would visibly lag as you drag a slider. The other detail that matters more than it might first appear: every single slider change redraws completely fresh from the *original*, untouched image you uploaded — never from whatever the canvas currently shows. This sounds like a minor implementation detail, but it's the difference between a photo editor that works correctly and one with a subtle, compounding bug: if you instead re-applied each new filter on top of an *already-filtered* canvas, adjustments would stack unpredictably — dragging Brightness back down to 100% after having previously nudged it up wouldn't actually undo anything, because the earlier brightened pixels would already be permanently baked into the canvas by the time the next filter was applied on top of them. Keeping the original image in memory and redrawing from scratch every time means every slider always represents an absolute setting relative to the untouched source image, exactly matching what the slider's number actually says, no matter what order you moved the sliders in or how many times you've adjusted them.