Available filters

The studio includes Grayscale, Sepia, Vintage, Invert, Sketch, Cartoon, Warm, Cool, and Vivid effects, all computed on an HTML5 canvas using pixel-level math.

How the filters work

Sketch - uses a simple edge-detection pass (difference from neighboring pixels) to produce a pencil-line effect.
Cartoon - posterizes each color channel to a small number of levels, reducing detail for a flat comic look.
Vivid - amplifies the distance of each channel from the luminance average, boosting saturation.

Privacy

Your images are processed entirely in your browser on an HTML5 canvas. No image data is sent to any server.

Color science behind filters

Most filters operate on the RGBA pixel array returned by the Canvas API's getImageData(). Each pixel is represented as four 8-bit values (0–255): red, green, blue, and alpha. Filters manipulate these values mathematically:

Grayscale: replace R, G, B with the luminance value 0.299R + 0.587G + 0.114B - coefficients that match human eye sensitivity.
Sepia: apply a matrix transform that shifts RGB toward warm brown tones (R' = 0.393R + 0.769G + 0.189B, etc.).
Warm/Cool: shift the red and blue channels in opposite directions - increase red for warm, increase blue and reduce red for cool.

Comparing canvas filters to CSS filters

CSS filter properties (grayscale, sepia, blur) apply effects in the GPU rendering pipeline without touching pixel data - they're fast but produce approximate results and can't be read back as modified pixel data. Canvas pixel manipulation (used here) is slower but gives exact control over every pixel and allows you to export the filtered image as a file.

For real-time video processing (e.g., applying filters to a webcam feed), CSS filters are preferred because they run at 60fps in GPU. For exporting a static modified image, canvas pixel manipulation is the standard approach.