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