Does pdf.js allow rendering of a selected (rectangular) part of a page instead of rendering an entire page to a canvas?

Question

Does pdf.js allow to render a PDF page only partially? More specifically, is it possible to tell pdf.js to render a selected "rectangle of pixels" out of an entire PDF page?

Assuming a resolution of 144 dpi, a typical page (DIN A4) would have approx. 684 (width) by 1190 (height) pixels. I would like to render (for example) a rectangle like [100, 100] (top left coordinate in pixels) and [400, 400] (bottom right coordinate in pixels).

A typical use case could be a scanned document with several handwritten notes that I would like to display and further process individually.

I do understand that a "workaround" could be to save the entire page as jpg (or any other suitable bitmap format) and apply some clipping function. But this would for sure be a less performant approach than selected rendering.

pdfs.js uses a viewport object (presumably containing parameters) for rendering. This object contains

• height
• width
• offsetX
• offsetY
• rotation
• scale
• transform
• viewBox (by default [0, 0, width / scale, height / scale])

One might think that manipulating the viewBox inside it might lead to the desired outcome, but I have found that changing the viewBox parameters does not do anything at all. The entire page is rendered every time that I apply the render method.

What might I have done wrong? Does pdf.js offer the desired functionality? And if so, how can I get it to work? Thank you very much!

Here is a very simple React component demonstrating my approach (that does not work):

import React, { useRef } from 'react';
import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';

function PdfTest() {
  // useRef hooks
  const myCanvas: React.RefObject<HTMLCanvasElement> = useRef(null);

  const test = () => {
    const loadDocument = pdfjs.getDocument('...');
    loadDocument.promise
      .then((pdf) => {
        return pdf.getPage(1);
      })
      .then((page) => {
        const viewport = page.getViewport({ scale: 2 });

        // Here I modify the viewport object on purpose
        viewport.viewBox = [100, 100, 400, 400];

        if (myCanvas.current) {
          const context = myCanvas.current.getContext('2d');
          if (context) {
            page.render({ canvasContext: context, viewport: viewport });
            myCanvas.current.height = viewport.height;
            myCanvas.current.width = viewport.width;
          }
        }
      });
  };

  // Render function
  return (
    <div>
      <button onClick={test}>Test!</button>
      <canvas ref={myCanvas} />
    </div>
  );
}

export default PdfTest;