The ingredients: a canvas and some text
Putting a watermark on an image technically means: draw the original image onto a canvas and paint text over it. The Canvas API ships everything you need for that — it takes surprisingly few commands. The watermark tool builds on exactly that, and everything runs locally in the browser: the image is never uploaded anywhere.
The core: semi-transparent text
A watermark should be visible but not intrusive — it sits semi-transparently on top of the image. That's exactly what globalAlpha is for: a number between 0 (invisible) and 1 (fully opaque) that lets everything drawn afterwards shine through accordingly.
ctx.globalAlpha = opacity / 100; // e.g. 35% opacity
ctx.fillText(text, x, y);That's the whole trick for a simple watermark: set the opacity, paint the text. The rest is the finer points that make it actually usable.
The rotation: translate + rotate
Diagonal watermarks (the classic: text slanted across the image) are harder to remove and look more deliberately placed. But Canvas always rotates around the origin at the top left — so you first move the origin to the text position, then rotate, paint, and put everything back:
ctx.translate(px, py); // move origin to the position
ctx.rotate(rotate * Math.PI / 180); // degrees to radians
ctx.fillText(text, 0, 0);The small calculation degrees × π / 180 translates the familiar angle degrees into the radians Canvas works with. A detail you reliably trip over exactly once while building.
The tiling: once is not enough
A single watermark in one corner is quickly cropped away. That's why there's the option to tile the text across the whole image — repeated in rows and columns. In code, that's a double loop that paints the text over and over at regular intervals. The result covers the entire image and can no longer be removed with a single crop.
The honest limit
Workshop notes also means naming the limits. A painted-on watermark is a visible notice, not an insurmountable protection. Anyone who really wants to can retouch a watermark away with some effort — the subtler it is, the easier. An opaque, tiled, diagonal watermark raises the bar considerably, but it doesn't make an image theft-proof. What watermarks can realistically achieve and which other means exist is covered in the post Protecting your images from theft.
What the tool deliberately doesn't do
It adds no logo of its own to the result — unlike many free apps that put their watermark over your watermark. That would be absurd for a tool whose entire purpose is your own watermark. And it uploads nothing: your image and your watermark text stay on your device. At the end, the canvas returns the finished image via toBlob() as a download — the same technique all the other tools use.