progress

web/viewer.css

@@ -231,6 +231,21 @@ canvas {
   -webkit-box-shadow: 0px 2px 10px #ff0;
 }
 
+.textLayer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  color: #000;
+}
+
+.textLayer > div {
+  color: transparent;
+  position: absolute;
+  line-height:1.3;
+}
+
 #viewer {
   margin: 44px 0px 0px;
   padding: 8px 0px;

web/viewer.js

@@ -475,6 +475,10 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
     canvas.mozOpaque = true;
     div.appendChild(canvas);
 
+    var textDiv = document.createElement('div');
+    textDiv.className = 'textLayer';
+    div.appendChild(textDiv);
+
     var scale = this.scale;
     canvas.width = pageWidth * scale;
     canvas.height = pageHeight * scale;
@@ -487,7 +491,7 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
     ctx.translate(-this.x * scale, -this.y * scale);
 
     stats.begin = Date.now();
-    this.content.startRendering(ctx, this.updateStats);
+    this.content.startRendering(ctx, this.updateStats, textDiv, scale);
 
     setupLinks(this.content, this.scale);
     div.setAttribute('data-loaded', true);