Add Watermark to PDF using JavaScript

Adding text or an image as a watermark on top of a document requires only a few lines of code using the setWatermark method of DocumentViewer. This method allows you to pass an options object to draw text on top of the document or pass a custom function which will be executed with a reference to the page canvas.

Draw text as watermark

To draw a watermark, use documentViewer.setWatermark and pass an options object as shown below.

1const { documentViewer } = instance.Core;
2
3documentViewer.setWatermark({
4  // Draw diagonal watermark in middle of the document
5  diagonal: {
6    fontSize: 25, // or even smaller size
7    fontFamily: 'sans-serif',
8    color: 'red',
9    opacity: 50, // from 0 to 100
10    text: 'Watermark'
11  },
12
13  // Draw header watermark
14  header: {
15    fontSize: 10,
16    fontFamily: 'sans-serif',
17    color: 'red',
18    opacity: 70,
19    left: 'left watermark',
20    center: 'center watermark',
21    right: ''
22  }
23});

1WebViewer({
2  initialDoc: 'https://url/to/my_file.docx',
3  // ...
4}, viewerElement)
5  .then(instance => {
6    const { docViewer } = instance;
7    docViewer.setWatermark({
8      // Draw diagonal watermark in middle of the document
9      diagonal: {
10        fontSize: 25, // or even smaller size
11        fontFamily: 'sans-serif',
12        color: 'red',
13        opacity: 50, // from 0 to 100
14        text: 'Watermark'
15      },
16      // Draw header watermark
17      header: {
18        fontSize: 10,
19        fontFamily: 'sans-serif',
20        color: 'red',
21        opacity: 70,
22        left: 'left watermark',
23        center: 'center watermark',
24        right: ''
25      }
26    });
27  });

Draw custom content as watermark

The setWatermark method also allows you to draw custom content on the page. To do this, pass a custom function to the API as a part of the options object.

For the following sample, we will use a Promise which will resolve with the watermark options object. If the document hasn't been loaded yet then DocumentViewer will wait to finish loading it until the watermark options are ready.

1WebViewer({
2  initialDoc: 'https://url/to/my_file.docx',
3  // ...
4}, viewerElement)
5  .then(instance => {
6    const { documentViewer } = instance.Core;
7    const path = '/samples/full-apis/TestFiles/butterfly.png'
8    // Promise resolves with options object
9    const promise = new Promise(resolve => {
10      const img = new Image();
11      const options = {
12        footer: {
13          fontSize: 15,
14          fontFamily: 'sans-serif',
15          color: 'red',
16          opacity: 70,
17          left: 'left watermark',
18          center: 'center watermark'
19        },
20        custom: (ctx, pageNumber, pageWidth, pageHeight) => {
21          // the pageNumber is also passed in so you could have
22          // a different watermark for each page
23          ctx.drawImage(
24            img,
25            pageWidth / 2 - img.width / 2,
26            pageHeight / 2 - img.height / 2
27          );
28        }
29      };
30      img.onload = () => { 
31        return resolve(options);
32      };
33      img.src = path;
34    });
35    documentViewer.setWatermark(promise);
36  });

1WebViewer({
2  initialDoc: 'https://url/to/my_file.docx',
3  // ...
4}, viewerElement)
5  .then(instance => {
6    const { docViewer } = instance;
7    const path = '/samples/full-apis/TestFiles/butterfly.png'
8    // Promise resolves with options object
9    const promise = new Promise(resolve => {
10      const img = new Image();
11      const options = {
12        footer: {
13          fontSize: 15,
14          fontFamily: 'sans-serif',
15          color: 'red',
16          opacity: 70,
17          left: 'left watermark',
18          center: 'center watermark'
19        },
20        custom: (ctx, pageNumber, pageWidth, pageHeight) => {
21          // the pageNumber is also passed in so you could have
22          // a different watermark for each page
23          ctx.drawImage(
24            img,
25            pageWidth / 2 - img.width / 2,
26            pageHeight / 2 - img.height / 2
27          );
28        }
29      };
30      img.onload = () => { 
31        return resolve(options);
32      };
33      img.src = path;
34    });
35    docViewer.setWatermark(promise);
36  });

1WebViewer({
2  initialDoc: 'https://url/to/my_file.docx',
3  // ...
4}, viewerElement)
5  .then(instance => {
6    const { docViewer } = instance;
7    const path = '/samples/full-apis/TestFiles/butterfly.png'
8    // Promise resolves with options object
9    const promise = new Promise(resolve => {
10      const img = new Image();
11      const options = {
12        footer: {
13          fontSize: 15,
14          fontFamily: 'sans-serif',
15          color: 'red',
16          opacity: 70,
17          left: 'left watermark',
18          center: 'center watermark'
19        },
20        custom: (ctx, pageIndex, pageWidth, pageHeight) => {
21          // the pageIndex is also passed in so you could have
22          // a different watermark for each page
23          ctx.drawImage(
24            img,
25            pageWidth / 2 - img.width / 2,
26            pageHeight / 2 - img.height / 2
27          );
28        }
29      };
30      img.onload = () => { 
31        return resolve(options);
32      };
33      img.src = path;
34    });
35    docViewer.setWatermark(promise);
36  });

Draw watermark text in custom positions

The setWatermarkcustom argument can also be used to draw text in custom positions.

1WebViewer({
2  // ...
3}, viewerElement)
4  .then(instance => {
5    const { documentViewer } = instance.Core;
6    documentViewer.setWatermark({
7      custom: (ctx, pageNumber, pageWidth, pageHeight) => {
8        // ctx is an instance of CanvasRenderingContext2D
9        // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
10        // Hence being able to leverage those properties
11        ctx.fillStyle = '#ff0000';
12        ctx.font = '20pt Arial';
13        ctx.globalAlpha = 0.4;
14    
15        ctx.save();
16        ctx.translate(0, pageHeight / 2);
17        ctx.rotate(-Math.PI / 2);
18        ctx.fillText('left side watermark', 0, 0);
19        ctx.restore();
20    
21        ctx.save();
22        ctx.translate(pageWidth, pageHeight / 2);
23        ctx.rotate(Math.PI / 2);
24        ctx.fillText('right side watermark', 0, 0);
25        ctx.restore();
26      },
27    });
28  });

1WebViewer({
2  // ...
3}, viewerElement)
4  .then(instance => {
5    const { docViewer } = instance;
6    docViewer.setWatermark({
7      custom: (ctx, pageNumber, pageWidth, pageHeight) => {
8        // ctx is an instance of CanvasRenderingContext2D
9        // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
10        // Hence being able to leverage those properties
11        ctx.fillStyle = '#ff0000';
12        ctx.font = '20pt Arial';
13        ctx.globalAlpha = 0.4;
14    
15        ctx.save();
16        ctx.translate(0, pageHeight / 2);
17        ctx.rotate(-Math.PI / 2);
18        ctx.fillText('left side watermark', 0, 0);
19        ctx.restore();
20    
21        ctx.save();
22        ctx.translate(pageWidth, pageHeight / 2);
23        ctx.rotate(Math.PI / 2);
24        ctx.fillText('right side watermark', 0, 0);
25        ctx.restore();
26      },
27    });
28  });

1WebViewer({
2  // ...
3}, viewerElement)
4  .then(instance => {
5    const { docViewer } = instance;
6    docViewer.setWatermark({
7      custom: (ctx, pageIndex, pageWidth, pageHeight) => {
8        // ctx is an instance of CanvasRenderingContext2D
9        // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
10        // Hence being able to leverage those properties
11        ctx.fillStyle = '#ff0000';
12        ctx.font = '20pt Arial';
13        ctx.globalAlpha = 0.4;
14    
15        ctx.save();
16        ctx.translate(0, pageHeight / 2);
17        ctx.rotate(-Math.PI / 2);
18        ctx.fillText('left side watermark', 0, 0);
19        ctx.restore();
20    
21        ctx.save();
22        ctx.translate(pageWidth, pageHeight / 2);
23        ctx.rotate(Math.PI / 2);
24        ctx.fillText('right side watermark', 0, 0);
25        ctx.restore();
26      },
27    });
28  });

Draw watermark without DocumentViewer

If you're constructing your own Document instance then it also provides a setWatermark method.

1const filePath = '/webviewer-demo.pdf';
2const watermarkOptions = {
3 header: {
4     fontSize: 15,
5     color: 'blue',
6     center: 'center watermark',
7 },
8 diagonal: {
9     fontSize: 30,
10     fontFamily: 'sans-serif',
11     color: 'red',
12     opacity: 100,
13     text: 'Watermark'
14 }
15};
16const doc = await Core.createDocument(filePath, { l: 'Insert commercial license key here after purchase'});
17// Set watermark options object
18doc.setWatermark(watermarkOptions);
19// Draw canvas
20doc.loadCanvasAsync({
21 pageIndex: 0,
22 getZoom: () =>  0.8,  // 80% zoom,
23 drawComplete: pageCanvas => {
24   // Append canvas to dom to see the result
25   document.body.appendChild(pageCanvas);
26 },
27});

1const filePath = '/webviewer-demo.pdf';
2const watermarkOptions = {
3 header: {
4     fontSize: 15,
5     color: 'blue',
6     center: 'center watermark',
7 },
8 diagonal: {
9     fontSize: 30,
10     fontFamily: 'sans-serif',
11     color: 'red',
12     opacity: 100,
13     text: 'Watermark'
14 }
15};
16const doc = await CoreControls.createDocument(filePath, { l: 'Insert commercial license key here after purchase'});
17// Set watermark options object
18doc.setWatermark(watermarkOptions);
19// Draw canvas
20doc.loadCanvasAsync({
21 pageIndex: 0,
22 getZoom: () =>  0.8,  // 80% zoom,
23 drawComplete: pageCanvas => {
24   // Append canvas to dom to see the result
25   document.body.appendChild(pageCanvas);
26 },
27});

Draw watermark dynamically

If you want to add a watermark or modify the existing watermark after pages are rendered, then after calling setWatermark you will also need to call the refreshAll and the updateView methods of DocumentViewer.

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer } = instance.Core;
4    const watermarkOptions = {...};
5    documentViewer.setWatermark(watermarkOptions);
6    documentViewer.refreshAll();
7    documentViewer.updateView();
8  })

1WebViewer(...)
2  .then(instance => {
3    const { docViewer } = instance;
4    const watermarkOptions = {...};
5    docViewer.setWatermark(watermarkOptions);
6    docViewer.refreshAll();
7    docViewer.updateView();
8  })

If you are going to use a Promise then you need to call those two methods after the Promise has resolved:

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer } = instance.Core;
4    const promise = new Promise(resolve => {
5      // some asynchronous operations to generate the watermark options object
6      resolve(watermarkOptions);
7    });
8    documentViewer.setWatermark(promise);
9    documentViewer.getWatermark().then(() => {
10      documentViewer.refreshAll();
11      documentViewer.updateView();
12    })
13  })

1WebViewer(...)
2  .then(instance => {
3    const { docViewer } = instance;
4    const promise = new Promise(resolve => {
5      // some asynchronous operations to generate the watermark options object
6      resolve(watermarkOptions);
7    });
8    docViewer.setWatermark(promise);
9    docViewer.getWatermark().then(() => {
10      docViewer.refreshAll();
11      docViewer.updateView();
12    })
13  })

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

Product:

Add Watermark to PDF using JavaScript

Draw text as watermark

Draw custom content as watermark

Draw watermark text in custom positions

Draw watermark without DocumentViewer

Draw watermark dynamically

On this page

Product:

Product:

Add Watermark to PDF using JavaScript

Draw text as watermark

Related Links

Related Links

Draw custom content as watermark

Related Links

Related Links

Related Links

Draw watermark text in custom positions

Related Links

Related Links

Related Links

Draw watermark without DocumentViewer

Related Links

Related Links

Draw watermark dynamically

Related Links

Related Links

Related Links

Related Links

On this page