Is there a way for pdfjs to render canvas layers without rendering text? I want to lay a layer of text div on top myself #20487

Yes, you can render only the background graphics/images on the without PDF.js drawing any of the PDF's native text.

1. Intercept Canvas Text Drawing Methods (Quickest Solution)

PDF.js paints text onto the 2D canvas context using fillText and strokeText. If you temporarily override these methods to do nothing before passing the context to page.render(), PDF.js will draw all lines, shapes, and images while completely skipping text:

const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');

// Save original context methods
const originalFillText = ctx.fillText;
const originalStrokeText = ctx.strokeText;

// Disable text drawing on this context
ctx.fillText = function () {};
ctx.strokeText = function () {};

// Render the page as usual
const renderContext = {
  canvasContext: ctx,
  viewport: viewport
};

page.render(renderContext).promise.then(() => {
  // Restore original methods if needed elsewhere
  ctx.fillText = originalFillText;
  ctx.strokeText = originalStrokeText;
});

2. Extract Text Data for Custom HTML Div Overlay

To construct your own HTML div layer precisely positioned over the canvas, fetch the layout and string metadata using getTextContent():

page.getTextContent().then((textContent) => {
  textContent.items.forEach((item) => {
    // item.str -> the text string
    // item.transform -> [scaleX, skewX, skewY, scaleY, x, y] matrix for viewport positioning
    console.log(item.str, item.transform);
  });
});

Keep in mind:
PDF.js draws everything onto a single, flattened element by default. It does not automatically split text and vector layers into separate DOM elements unless you extract text content via getTextContent() and build your own HTML overlay on to

Recent pdf.js versions can do this without patching the canvas context: page.render() takes an
operationsFilter callback, and any operation it returns false for is skipped. Look up which
operator each index is in the page's operator list, and drop the text-showing ones:

import * as pdfjsLib from "pdfjs-dist";

const TEXT_OPS = new Set([
  pdfjsLib.OPS.showText,
  pdfjsLib.OPS.showSpacedText,
  pdfjsLib.OPS.nextLineShowText,
  pdfjsLib.OPS.nextLineSetSpacingShowText,
]);

const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.5 });
const { fnArray } = await page.getOperatorList();

await page.render({
  canvas,
  viewport,
  operationsFilter: (index) => !TEXT_OPS.has(fnArray[index]),
}).promise;

Everything else (images, paths, fills, shadings) still draws, so you can put your own text layer
on top. For the positions, page.getTextContent() gives each item's transform, and
pdfjsLib.Util.transform(viewport.transform, item.transform) maps it into canvas coordinates.

I checked this on 6.3.289 with a page that has text and a filled rectangle. Unfiltered, the text
area had 341 dark pixels; filtered, it had 0, and the rectangle's pixels were identical in both
renders. Also note that in 6.x getDocument() needs an object such as { url } rather than a bare
string.