PDF.js text highlighting: Display annotations in JavaScript

<!doctype html>
<html>
  <head>
    <title>PDF.js Highlight Annotations</title>
    <style>
      body {
        margin: 0;
        padding: 20px;
        position: relative;
      }
      #canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <!-- Canvas to place the PDF. -->
    <canvas id="canvas"></canvas>

    <script type="module">
      import * as pdfjsLib from './pdf.mjs';

      // Get the canvas element.
      const canvas = document.getElementById('canvas');

      // Get the PDF file URL.
      const pdfUrl = 'annotation.pdf'; // Replace with the URL of your PDF document.

      // Configure the PDF.js worker source.
      pdfjsLib.GlobalWorkerOptions.workerSrc = './pdf.worker.mjs';

      // Load the PDF file using PDF.js.
      pdfjsLib.getDocument({ url: pdfUrl }).promise.then(function (pdfDoc) {
        // Get the first page of the PDF file.
        return pdfDoc.getPage(1).then(function (page) {
          const viewport = page.getViewport({ scale: 1 });

          // Set the canvas dimensions to match the PDF page size.
          canvas.width = viewport.width;
          canvas.height = viewport.height;

          // Set the canvas rendering context.
          const ctx = canvas.getContext('2d');

          const renderContext = {
            canvasContext: ctx,
            viewport: viewport,
            // Draw annotations separately in the overlay below.
            annotationMode: pdfjsLib.AnnotationMode.DISABLE,
          };

          // Render the PDF page to the canvas.
          return page.render(renderContext).promise.then(function () {
            console.log('Rendering complete');
            // Call the function to render highlight annotations after the PDF page is rendered.
            return renderHighlightAnnotations(page, viewport);
          });
        });
      }).catch(function (error) {
        console.error(
          'Unable to load or render the PDF. Check the PDF and worker URLs.',
          error,
        );
      });
    </script>
  </body>
</html>

function renderHighlightAnnotations(page, viewport) {
  // Position the overlay over the canvas at its current size and location.
  const parent = canvas.parentNode;
  if (getComputedStyle(parent).position === 'static') {
    parent.style.position = 'relative';
  }
  const overlay = document.createElement('div');
  overlay.style.position = 'absolute';
  overlay.style.left = canvas.offsetLeft + canvas.clientLeft + 'px';
  overlay.style.top = canvas.offsetTop + canvas.clientTop + 'px';
  overlay.style.width = viewport.width + 'px';
  overlay.style.height = viewport.height + 'px';
  overlay.style.pointerEvents = 'none';
  parent.appendChild(overlay);

  return page.getAnnotations().then(function (annotations) {
    annotations.forEach(function (annotation) {
      if (annotation.subtype === 'Highlight') {
        // Convert the PDF user-space rectangle to viewport (canvas)
        // coordinates. This handles the bottom-up Y axis, the current
        // scale, and any page rotation in one step.
        const [left, bottom, right, top] = annotation.rect;
        const [x1, y1] = viewport.convertToViewportPoint(left, bottom);
        const [x2, y2] = viewport.convertToViewportPoint(right, top);
        const highlight = document.createElement('div');
        highlight.style.position = 'absolute';
        highlight.style.left = Math.min(x1, x2) + 'px';
        highlight.style.top = Math.min(y1, y2) + 'px';
        highlight.style.width = Math.abs(x2 - x1) + 'px';
        highlight.style.height = Math.abs(y2 - y1) + 'px';
        highlight.style.backgroundColor = 'yellow';
        highlight.style.opacity = '0.5';
        highlight.style.pointerEvents = 'none';
        overlay.appendChild(highlight);
      }
    });
  });
}

<!doctype html>
<html lang="en">
  <head>
    <title>Nutrient PDF Viewer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="nutrient" style="height: 100vh;"></div>

    <script type="module">
      import './assets/nutrient-viewer.js';

      const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

      NutrientViewer.load({
        container: '#nutrient',
        document: 'document.pdf',
        baseUrl,
      })
        .then((instance) => {
          console.log('Nutrient Viewer loaded', instance);
        })
        .catch((error) => {
          console.error(error.message);
        });
    </script>
  </body>
</html>

NutrientViewer.load({
  container: '#nutrient',
  document: 'document.pdf',
  baseUrl,
})
  .then(async function (instance) {
    try {
      console.log('Nutrient loaded', instance);
      const rects = NutrientViewer.Immutable.List([
        new NutrientViewer.Geometry.Rect({
          left: 10,
          top: 120,
          width: 200,
          height: 10,
        }),
        new NutrientViewer.Geometry.Rect({
          left: 10,
          top: 150,
          width: 200,
          height: 10,
        }),
      ]);
      const annotation = new NutrientViewer.Annotations.HighlightAnnotation(
        {
          pageIndex: 0,
          rects: rects,
          boundingBox: NutrientViewer.Geometry.Rect.union(rects),
        },
      );
      await instance.create(annotation);
      console.log('Highlight annotation added successfully.');
    } catch (error) {
      console.error('Error adding highlight annotation:', error.message);
    }
  })
  .catch(function (error) {
    console.error('NutrientViewer failed to load:', error.message);
  });