# Add a Watermark to an Image in JavaScript

Pass watermark and signature props and Embed Editor paints them on every photo it saves. Each is a text or an image with a lock that sets how far the user may change it, from fixed to free. It is in the Full edition.

## What Watermark Gives Your Users

- Three Locks: 'fixed' is shown and untouchable, 'required' can be adjusted but not hidden or reworded, and 'free' can be adjusted, edited or hidden. With every mark fixed, the editor shows no tool for them.
- Grid or Single: 'grid' tiles the mark over the photo in rows and 'single' puts one in the center. Size, spacing, angle, opacity and color are all props; the color is 'auto' by default, white or black as the photo under it reads.
- A Signature That Sits Where You Say: The signature goes to 'auto' (the emptiest corner) or any of nine positions, with a margin, a size and an opacity. Unless it is fixed the user can adjust it.
- Text, Image or Logo: A text mark uses any of nine fonts, and an image mark can be an SVG. The marks belong to the output: they are drawn last, over the annotations and the frame.
- The Same Marks Without the UI: processImage takes watermark and signature too, so the same marks stamp photos in code. It rejects with MARK_FAILED for a fixed or required mark that cannot load.

## The Props That Control It

```tsx
import { EmbedEditor } from '@embededitor/full/react';

const PhotoEditor = ({ photo }: { photo: string }) => (
	<EmbedEditor
		signature={{ text: '© Ana Lima 2026' }}
		src={photo}
		watermark={{ lock: 'required', text: '© Lume Studio' }}
	/>
);

export default PhotoEditor;
```

- [watermark](https://docs.embededitor.com/api-reference/props#branding): The host watermark: a text or an image src, a lock, layout, size, spacing, angle, opacity and color.
- [signature](https://docs.embededitor.com/api-reference/props#branding): The host signature: a text or an image src, a lock, position, size, margin, opacity and color.
- [onLoadError](https://docs.embededitor.com/api-reference/props#callbacks): Receives MARK_FAILED when a mark's image or the letter of a text mark can't load.
- [onProcessError](https://docs.embededitor.com/api-reference/props#callbacks): Receives MARK_FAILED when Save can't draw a fixed or required mark.

[Every prop in the docs](https://docs.embededitor.com/api-reference/props)

## Where It Fits

- Stock and Photo Sales: A required tiled watermark on every preview a customer downloads, with the signature in a corner.
- Photographers and Studios: Stamp the studio name on every photo that leaves the editor, fixed so nobody can hide it.
- User-Generated Content: A free signature the author places and a fixed watermark you keep, on the same photo.
- Batch Stamping in Code: Run the same marks through processImage on a batch, with no editor on screen.

## Questions

### How do I add a watermark to an image in JavaScript?

Give EmbedEditor a watermark prop with a text or an image src. It is painted on the saved photo, the whole of it for a grid or one mark in the center for a single.

### Can the user remove the watermark?

'fixed' shows the mark and the user can't change it. 'required' lets them adjust size, place, opacity and font but not hide it or change its text. 'free' lets them adjust it, edit its text or hide it. The watermark defaults to fixed and the signature to free.

### What is the difference between a watermark and a signature?

A watermark says the photo is protected and tiles by default; a signature says whose it is and sits in a corner or the middle. Each takes a text or an image, and a lock.

### Can the watermark be an image or a logo?

Yes. src takes anything the editor src takes, SVG included. An image watermark is drawn as a silhouette in the mark color, and a signature logo keeps its own colors.

### What happens if the mark cannot load?

For a fixed or required mark, Save, Copy and Share stay off and a banner offers Try Again; onLoadError receives MARK_FAILED. A free mark is left out of the file, with a notice.

## Try watermark in the playground.

It opens with this feature on. Change the edition, the colors and the tools, and copy the code for your app.

[Open in the Playground](https://embededitor.com/playground#c=eyJlZGl0aW9uIjoiRlVMTCIsInBob3RvIjoid2F0ZXJtYXJrLWdyaWQtYmFrZXJ5IiwicHJvcHMiOnsid2F0ZXJtYXJrIjp7InRleHQiOiLCqSBMdW1lIFN0dWRpbyJ9fX0&group=marks)