Front-end implementation of watermark function in react js

import React, { useRef, useEffect } from 'react';

function Watermark({ text, opacity = 0.1, color = 'rgba(0, 0, 0, 0.2)' }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');

    const drawWatermark = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      context.fillStyle = color;
      context.globalAlpha = opacity;
      context.font = '20px Arial'; // Adjust font size and style as needed
      context.textAlign = 'center';
      context.textBaseline = 'middle';

      const x = canvas.width / 2;
      const y = canvas.height / 2;
      const angle = Math.PI / 15; // Rotate watermark slightly

      context.save();
      context.translate(x, y);
      context.rotate(angle);
      context.fillText(text, 0, 0);
      context.restore();
    };

    drawWatermark();

    // Redraw watermark on window resize
    window.addEventListener('resize', drawWatermark);

    return () => {
      window.removeEventListener('resize', drawWatermark);
    };
  }, [text, opacity, color]);

  return (
    <canvas ref={canvasRef} style={{ position: 'fixed', top: 0, left: 0, pointerEvents: 'none' }} />
  );
}

export default Watermark;

Explanation:

1. Import necessary hooks:
   • useRef: To create a reference to the canvas element.
   • useEffect: To handle side effects like drawing the watermark and managing resize events.
2. Component props:
   • text: The text to be used as the watermark.
   • opacity: The opacity of the watermark (default: 0.1).
   • color: The color of the watermark (default: 'rgba(0, 0, 0, 0.2)').
3. Create canvas reference:
   • canvasRef: Stores a reference to the canvas element for later access.
4. useEffect hook:
   • Inside the hook:
     • Get the canvas element and its 2D rendering context.
     • Define the drawWatermark function:
       • Set the canvas dimensions to match the window size.
       • Set the fill style, opacity, font, and text alignment for the watermark text.
       • Calculate the center coordinates of the canvas.
       • Rotate the canvas slightly for a more visually appealing effect.
       • Draw the watermark text on the canvas.
     • Call drawWatermark initially to render the watermark.
     • Add a resize event listener to redraw the watermark when the window size changes.
     • In the cleanup function, remove the resize event listener to prevent memory leaks.
5. JSX:
   • Render a canvas element with the specified ref and styles:
     • position: 'fixed': Position the canvas at the top-left corner of the screen.
     • top: 0, left: 0: Ensure the canvas covers the entire screen.
     • pointerEvents: 'none': Make the watermark invisible to mouse and touch events.

How to use:

1. Import the Watermark component into your desired component.
2. Use the component with the desired text, opacity, and color props:

import Watermark from './Watermark';

function MyComponent() {
  return (
    <>
      {/* Your component content */}
      <Watermark text="© My Company" opacity={0.05} />
    </>
  );
}

This implementation provides a basic watermark functionality. You can further customize it by:

• Adding more complex styling to the watermark text (e.g., shadows, gradients).
• Implementing different watermark positions (e.g., top-right, bottom-left).
• Adding animations to the watermark.
• Making the watermark configurable through user settings.