Watermarking Images Client-Side with Canvas
Protecting your creative work by embedding visible and steganographic watermarks in the browser.
MV
Marcus Vance
Contributing Author · Squoosh Next BlogAdding a visible text watermark using the HTML5 Canvas API requires drawing the source image, then overlaying text using fillText or strokeText with a semi-transparent globalAlpha setting. For professional use, the watermark should be rendered using Impact or a bold font, with a drop shadow for legibility on both light and dark source images. Positioning at the bottom-right corner with 15px padding is standard practice.
Steganographic watermarking, where a hidden identifier is embedded invisibly in the image data using LSB (least significant bit) modification, is also achievable in Canvas. By modifying the last bit of the red channel of pixels at specific coordinates derived from a seed, you can embed a 64-bit identifier that survives JPEG compression at quality above 85. This approach is used by stock photography platforms to track unauthorized use.
Key Takeaways
Adding a visible text watermark using the HTML5 Canvas API requires drawing the source image, then overlaying text using fillText or strokeText with a semi-transparent globalAlpha setting.
For professional use, the watermark should be rendered using Impact or a bold font, with a drop shadow for legibility on both light and dark source images.
Positioning at the bottom-right corner with 15px padding is standard practice.
Steganographic watermarking, where a hidden identifier is embedded invisibly in the image data using LSB (least significant bit) modification, is also achievable in Canvas.
Try It in the Workspace
Everything discussed in this article can be tested directly in Squoosh Next — no sign-up, no upload, 100% client-side.