Image Watermark

When applying a watermark, you usually want it to be slightly see-through (e.g., 50% opacity) so it protects the image without completely obliterating the underlying details.

But how does the computer actually calculate a "see-through" pixel?

Every pixel in an image is represented by Red, Green, Blue, and Alpha (transparency) channels. When you instruct the HTML5 Canvas to use a globalAlpha = 0.5 and draw a watermark text over a photo, the browser executes standard Alpha Blending.

For every single pixel where the watermark overlaps the photo, it runs this exact formula:

Final_Color = (Watermark_Color * 0.5) + (Photo_Color * (1.0 - 0.5))

It is mathematically averaging the two colors based on the weight of the Alpha value.

Because running that blending formula on a 20-megapixel photo requires performing tens of millions of mathematical operations, processing an entire batch of 50 images would completely freeze the browser's UI thread.

To solve this, KaruviLab executes the watermarking using OffscreenCanvas instances spawned inside background Web Workers. This allows the heavy alpha blending math to run in parallel on your CPU's other cores, keeping the interface completely fluid.