Add a watermark

By default, each page is constructed by canvas, text, and annotation layers. In this example, we will add a simple watermark at the center of page.
This page demonstrates a simple way to create a watermark with CSS
const renderPage: RenderPage = (props: RenderPageProps) => (
<>
{props.canvasLayer.children}
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
>
<div
style={{
color: 'rgba(0, 0, 0, 0.2)',
fontSize: `${8 * props.scale}rem`,
fontWeight: 'bold',
textTransform: 'uppercase',
transform: 'rotate(-45deg)',
userSelect: 'none',
}}
>
Draft
</div>
</div>
{props.annotationLayer.children}
{props.textLayer.children}
</>
);
<Viewer fileUrl="/assets/pdf-open-parameters.pdf" renderPage={renderPage} />;
Notice that the watermark should be scaled when user zoom the document, so we have to set its font size based on the current zoom level:
const renderPage: RenderPage = (props: RenderPageProps) => (
...
<div
style={{
fontSize: `${8 * props.scale}rem`,
...
}}
>
Draft
</div>
...
);