Is it possible to search draw text on canvas using PDFJS?

Question

I am working on web app in which i have to display PDF file using PDF.JS and there are few area where i have to draw a rectangle and user can click on that which take him to details page. Till now i am able to display pdf and while looking at pdf js i found canvas.js in which all text is draw on canvas using
showText: function CanvasGraphics_showText(glyphs) {} function now i am keeping track of all text those text where i have to draw a rectangle but i am facing some problem to accomplish it. showText function calls many times which creating multiple rectangles. I have done following changes in function

if(glyphs.length ==10){
          // common case
            var bValue=false;

            glyphs.forEach(function(value, index, ar){
            var str =['d', 'e', 't', 'a','i','l','='];

            if(str.indexOf(value.fontChar)>=0){
                bValue=true;
                }
            });

            if(bValue){
                 ctx.beginPath();
                  ctx.rect(scaledX, 50, 200, 100);
                  ctx.fillStyle = 'yellow';
                  ctx.fill();
                  ctx.lineWidth = 2;
                  ctx.strokeStyle = 'black';
                  ctx.stroke();     
                  ctx.font = '20pt Calibri';
                  // textAlign aligns text horizontally relative to placement
                  ctx.textAlign = 'center';
                  // textBaseline aligns text vertically relative to font
                    // style
                  ctx.textBaseline = 'middle';
                  ctx.fillStyle = 'blue';
                  ctx.fillText("Click", 120, 100);
            }

          }

glyphs is array of objects and i am searching for values define in str. Can any one please point me into right direction ? Thanks in Advance.

Answer 1

It's not really possible to do this directly. Canvas is, fundamentally, a bitmap-based graphics engine: the only things it remembers from call to call are the values of the pixels inside it. You can draw text, but once you've done that, the canvas doesn't know that it's text anymore . That's why you can't search for it inside the image.

The quickest and easiest way around this is to keep track of the text somewhere else. @ZachSaucier's comment mentions this possibility. I see that you're concerned about performance, but the alternative would be to implement some kind of OCR algorithm to extract the text from the bitmap. There's no standard way to do that, so you'd have to implement OCR yourself, and it would be much slower than storing the text in a variable.

Another option would be to use SVG instead of Canvas. SVG isn't bitmap-based, so when you put text into an SVG image, the engine can remember that it's text, and you could search within that. However, drawing things in SVG is very different from drawing them in Canvas, so unless you're already using a library that can work with either one, you would have to rewrite your drawing code. That might not be feasible for what you're trying to do.