How I built a free browser-based watermark remover using Canvas API

I recently built CleanMark — a free, browser-based watermark removal tool that runs entirely in your
browser with no uploads, no registration, and no cost.

Try it here: https://cleanmark.org

## The core idea

Most watermark removers send your image to a server. CleanMark does everything locally using the
browser's Canvas API — your image never leaves your device.

## How Canvas inpainting works

The technique is called inpainting — filling in a selected region based on surrounding pixels.

Here's the basic flow:

1. User selects the watermark area with a brush or rectangle tool
2. The selection becomes a mask (white = remove, black = keep)
3. For each masked pixel, sample neighboring non-masked pixels
4. Fill the masked area using a weighted average of those neighbors

The sampling strategy matters a lot. A naive approach just averages nearby pixels, which creates a

blurry patch. A better approach uses patch-based matching — find a similar texture patch elsewhere in
the image and copy it in.

For CleanMark, I implemented a fast approximation:

• Scan outward from each masked pixel in concentric rings
• Weight closer pixels more heavily
• Apply a slight blur to blend edges

This works well for simple backgrounds (gradients, solid colors, textures) which covers most watermark
use cases.

## Why browser-only?

• Privacy: your images stay on your device
• Cost: no server = no hosting bill
• Speed: no upload/download round trip

## Stack

• Next.js (App Router)
• Canvas API for image processing
• next-intl for i18n (English + Chinese)

## What's next

• Improve inpainting quality for complex backgrounds
• Add batch processing
• Open source the core algorithm

If you're building image tools in the browser, the Canvas API is more powerful than most people

realize. Happy to answer questions about the implementation.