Image Watermark Tool

Image watermarking places text, a logo, or another image over a picture to show ownership, source, brand identity, usage status, or publication context. It is commonly used for product photos, portfolios, event images, training material, social posts, and previews sent before final approval. The challenge is balance: a watermark should be visible enough to discourage casual reuse, but not so heavy that it ruins the subject, covers important details, or makes the image look unprofessional. Position, opacity, size, repetition, and rotation all matter. This browser-based tool is intended for fast labeling and lightweight protection without uploading the original image.

Watermarking happens entirely on a 2D canvas. The source image is drawn into an HTMLCanvasElement at its native pixel dimensions through ctx.drawImage, then text or a logo is composited on top using ctx.fillText for strings and a second drawImage call for raster overlays. Opacity is controlled by ctx.globalAlpha, which multiplies onto every alpha channel that follows; a globalAlpha of 0.5 against a 50%-transparent PNG ends up at 25% on the final pixel, which is the most common cause of 'why is my watermark invisible' bug reports. Positioning uses standard canvas transforms: ctx.translate moves the origin to the placement anchor (top-left, top-right, centre, bottom-right, or each cell of a 3×3 grid), ctx.rotate(angle) tilts a diagonal stamp around that origin, and the draw call places the mark with no further offset. Tiled watermarks call CanvasPattern.createPattern with the rotated source and ctx.fillRect across the whole canvas, which is how a full-page DRAFT stripe stays evenly spaced regardless of source dimensions. Font metrics come from ctx.measureText, which reports CSS pixels, so a 28 px label that fits the preview on a 2x display can clip on a 1x mobile export. The export step calls canvas.toBlob with 'image/png', 'image/jpeg', or 'image/webp' and an optional quality parameter for the lossy formats. The canvas runs at the source resolution, so the output preserves the original pixel dimensions but does not carry the source EXIF orientation, ICC profile, or other metadata. Batches above ~30 large files start blocking the UI thread because toBlob is asynchronous but the draw stack runs synchronously on the main thread, which is why a heavy workload benefits from moving canvas work into a Web Worker with OffscreenCanvas.

• Composite stack: ctx.drawImage for the base, ctx.fillText (or a second drawImage) for the mark, ctx.globalAlpha for transparency multiplication.
• Alpha math: globalAlpha multiplies onto each pixel's existing alpha, so a 0.5 mark on a 0.5-alpha PNG renders at 0.25, not 0.5.
• Rotation: ctx.translate to the anchor, ctx.rotate(angle) in radians, then draw at origin (0,0) so the transform stays centred on the placement point.
• Tiling: createPattern returns a CanvasPattern that fillRect can paint across the whole canvas, keeping spacing uniform across any source dimensions.
• Text metrics: measureText reports CSS pixels, so a label sized on a 2x preview can overflow the image edge on a 1x mobile export; size proportional to canvas.width when in doubt.
• Export: toBlob('image/png' | 'image/jpeg' | 'image/webp', quality) preserves source resolution but strips EXIF and ICC; rotate based on EXIF orientation before draw if portrait/landscape correctness matters.