Question 237536 in Html Question posted in
Some basic documentation can be found here.

Html – Adding text to pdf.js canvas before display

Is it possible to add text to canvas before display it on page?

Cuz for now it like:

<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>

I tried to add div and span with text inside tag, but it didn’t display it. Also tried to add text to canvas

pdfjsLib.getDocument(url).promise.then(function(pdf) {
thePdf = pdf;
viewer = document.getElementById('pdf-viewer');
        
for(page = 1; page <= pdf.numPages; page++) {
 canvas = document.createElement("canvas");    
 canvas.className = 'pdf-page-canvas';         
  viewer.appendChild(canvas);         
  renderPage(page, canvas);
 }
});
    
function renderPage(pageNumber, canvas) {
 thePdf.getPage(pageNumber).then(function(page) {
 viewport = page.getViewport({ scale: scale });
 canvas.height = viewport.height;
 canvas.width = viewport.width;
 var gcc = canvas.getContext('2d');
 gcc.font = "30px Comic Sans MS";
 gcc.fillStyle = "green";
 gcc.textAlign = "center";
 gcc.fillText("Hello World", canvas.width/2, canvas.height/2);           
 page.render({canvasContext: gcc, viewport: viewport});
 );
}

It just display normal pdf page with content on it, without any "Hello world" text on it in any part. What I’m doing wrong? Maybe I can parse canvas to html and them add text to it as normal tag? Or edit canvas as image-like object and update it with added text?

Tags:

2

Answers


  1. 0

    The approach you’re trying to use to add text to a canvas element and then display it as part of a PDF viewer is on the right track, but there are some issues in your code that need to be addressed. You cannot directly add HTML elements like ” or ” to a canvas element, as the canvas is a bitmap-based rendering context.

    However, you can draw text onto the canvas element as you’ve attempted to do in your code. The issue in your code seems to be related to the rendering order and scale of the canvas. Here’s a modified version of your code that should work:

    let thePdf;
let viewer = document.getElementById('pdf-viewer');
let scale = 1.5; // You can adjust the scale as needed

pdfjsLib.getDocument(url).promise.then(function(pdf) {
    thePdf = pdf;

    for (let page = 1; page <= pdf.numPages; page++) {
        let canvas = document.createElement("canvas");
        canvas.className = 'pdf-page-canvas';
        viewer.appendChild(canvas);
        renderPage(page, canvas);
    }
});

function renderPage(pageNumber, canvas) {
    thePdf.getPage(pageNumber).then(function(page) {
        let viewport = page.getViewport({ scale: scale });
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        let context = canvas.getContext('2d');

        // Render the PDF page on the canvas
        page.render({ canvasContext: context, viewport: viewport });

        // Add text to the canvas
        context.font = "30px Comic Sans MS";
        context.fillStyle = "green";
        context.textAlign = "center";
        context.fillText("Hello World", canvas.width / 2, canvas.height / 2);
    });
}

    Make sure you’ve included the PDF.js library correctly in your HTML file for this code to work.

    This code loads a PDF document, creates canvas elements for each page, renders the PDF content on the canvas, and then adds the "Hello World" text to each canvas. You can adjust the scale and text properties as needed for your specific use case.

    If you’re still having issues with the text not appearing, double-check that the PDF.js library is correctly included and that there are no errors in your browser’s console.

    Login or Signup to reply.
  2. 0

    Canvas does not inherently support layering in the way you’re expecting. When you render a PDF page onto a canvas, it effectively replaces the entire canvas content, including any custom text you added previously.

    To achieve the effect of overlaying custom text on a PDF page, you can take the approach of using an HTML container to overlay the text on top of the canvas. Here’s a more detailed example of how to do this:

    <div id="pdf-container" style="position: relative;">
  <canvas id="pdf-canvas" class="pdf-page-canvas" height="841" width="595"></canvas>
  <div id="text-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    Hello World
  </div>
</div>

    In this HTML structure, we have a container (pdf-container) that holds both the canvas (pdf-canvas) and the text overlay (text-overlay). The text-overlay div is positioned absolutely within the container, centered both vertically and horizontally.

    Then, you can use CSS to style the text overlay (text-overlay) as needed.

    Here’s how you can adjust your JavaScript code to work with this structure:

    pdfjsLib.getDocument(url).promise.then(function(pdf) {
  thePdf = pdf;
  viewer = document.getElementById('pdf-container');
  canvas = document.getElementById('pdf-canvas');
  textOverlay = document.getElementById('text-overlay');
  
  for (page = 1; page <= pdf.numPages; page++) {
    renderPage(page, canvas, textOverlay);
  }
});

function renderPage(pageNumber, canvas, textOverlay) {
  thePdf.getPage(pageNumber).then(function(page) {
    viewport = page.getViewport({ scale: scale });
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    textOverlay.style.width = viewport.width + 'px';
    textOverlay.style.height = viewport.height + 'px';
    
    var ctx = canvas.getContext('2d');
    
    // Render PDF content on the canvas
    page.render({ canvasContext: ctx, viewport: viewport })
      .promise.then(function () {
        // Text overlay is automatically displayed on top of the canvas
      });
  });
}

    This code positions the text overlay div over the canvas, ensuring it is centered both vertically and horizontally. When the PDF content is rendered onto the canvas, the text overlay div will remain on top, giving the appearance of text overlaid on the PDF page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search