Detecting aspect ratio

[indreksiitan]

What is the best way to detect the aspect ratio of each page in order to update the CSS accordingly, as apparently the default behaviour is to stretch the page to match the canvas aspect ratio. Making a UI for a multi-page browsable catalog.

[christianalberto]

Hi @indreksiitan, In PDF.js, pages inside a PDF can have varying dimensions and orientations. To prevent canvas stretching and properly detect each page's aspect ratio, you use the page.getViewport() method provided by the PDFPageProxy object.

1. Get the Aspect Ratio from PDF.js Page API
   When loading a page with PDF.js (pdfDocument.getPage(pageNumber)), fetch its viewport at scale 1.0 (or any scale) to extract the native page width and height:

const page = await pdfDocument.getPage(pageNumber);

// Get the unscaled viewport (takes rotation into account automatically)
const viewport = page.getViewport({ scale: 1.0 });

const width = viewport.width;
const height = viewport.height;
const aspectRatio = width / height;

2. Preventing Canvas Distortion
   Canvas stretching usually happens when the HTML dimensions (the internal drawing buffer) don't match the aspect ratio of the rendered viewport, or when CSS forces width/height without preserving aspect ratio.

Correct Rendering Pattern:

const scale = 1.5; // Desired render scale
const viewport = page.getViewport({ scale });

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

// Set internal canvas drawing buffer dimensions to match viewport
canvas.width = viewport.width;
canvas.height = viewport.height;

// Optionally, update container CSS using native CSS aspect-ratio
const pageContainer = document.createElement('div');
pageContainer.classList.add('pdf-page');
pageContainer.style.aspectRatio = `${viewport.width} / ${viewport.height}`;

// Render page onto canvas
const renderContext = {
  canvasContext: context,
  viewport: viewport
};
await page.render(renderContext).promise;

3. Handling High-DPI (Retina) Displays To keep rendering crisp on high-resolution screens without breaking aspect ratio:

const outputScale = window.devicePixelRatio || 1;
const viewport = page.getViewport({ scale: 1.0 });

// Set internal pixel buffer size based on pixel ratio
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);

// Set display size via CSS style to maintain layout aspect ratio
canvas.style.width = `${viewport.width}px`;
canvas.style.height = `${viewport.height}px`;

const transform = outputScale !== 1 
  ? [outputScale, 0, 0, outputScale, 0, 0] 
  : null;

await page.render({
  canvasContext: context,
  viewport: viewport,
  transform: transform
}).promise;

Summary Checklist for Browsable Catalogs

• Calculate Aspect Ratio: Use viewport.width / viewport.height from page.getViewport({ scale: 1.0 }).
• Apply CSS aspect-ratio: Set style="aspect-ratio: ${viewport.width} / ${viewport.height}" on the parent page container.
• Sync Canvas Attributes: Always set canvas.width and canvas.height explicitly using the viewport object before calling page.render().