Introduce ImageCanvas to handle canvas rendering in WebWorker

canvas_proxy.js

@@ -14,9 +14,9 @@ function CanvasProxy(width, height) {
         "arc",
         "fillText",
         "strokeText",
-        "drawImage",
+        // "drawImage",
-        "getImageData",
+        // "getImageData",
-        "putImageData",
+        // "putImageData",
         "createImageData",
         "drawWindow",
         "save",
@@ -50,6 +50,7 @@ function CanvasProxy(width, height) {
         "$restoreCurrentX",
         "$showText"
     ];
+
     function buildFuncCall(name) {
         return function() {
             // console.log("funcCall", name)

fonts.js

@@ -855,8 +855,6 @@ var Font = (function () {
           var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}";
           var styleSheet = document.styleSheets[0];
           styleSheet.insertRule(rule, styleSheet.length);
-          console.log("added font", fontName);
-          console.log(rule);
       }
     }
   };

pdf.js

@@ -2269,14 +2269,32 @@ var Encodings = {
   }
 };
 
+function ImageCanvas(width, height) {
+    var tmpCanvas = this.canvas = document.createElement("canvas");
+    tmpCanvas.width = width;
+    tmpCanvas.height = height;
+
+    this.ctx = tmpCanvas.getContext("2d");
+    this.imgData = this.ctx.getImageData(0, 0, width, height);
+}
+
+ImageCanvas.prototype.putImageData = function(imgData) {
+    this.ctx.putImageData(imgData, 0, 0);
+}
+
+ImageCanvas.prototype.getCanvas = function() {
+    return this.canvas;
+}
+
 var CanvasGraphics = (function() {
-    function constructor(canvasCtx) {
+    function constructor(canvasCtx, imageCanvas) {
         this.ctx = canvasCtx;
         this.current = new CanvasExtraState();
         this.stateStack = [ ];
         this.pendingClip = null;
         this.res = null;
         this.xobjs = null;
+        this.ImageCanvas = imageCanvas || ImageCanvas;
     }
 
     constructor.prototype = {
@@ -3009,6 +3027,7 @@ var CanvasGraphics = (function() {
             var tmpCanvas = document.createElement("canvas");
             tmpCanvas.width = Math.ceil(botRight[0] - topLeft[0]);
             tmpCanvas.height = Math.ceil(botRight[1] - topLeft[1]);
+            console.log("tilingFill", tmpCanvas.width, tmpCanvas.height);
 
             // set the new canvas element context as the graphics context
             var tmpCtx = tmpCanvas.getContext("2d");
@@ -3249,6 +3268,7 @@ var CanvasGraphics = (function() {
                 ctx.drawImage(domImage, 0, 0, domImage.width, domImage.height,
                               0, -h, w, h);
                 this.restore();
+                console.log("drawImage");
                 return;
             }
 
@@ -3328,11 +3348,15 @@ var CanvasGraphics = (function() {
                 // handle matte object
             }
 
-            var tmpCanvas = document.createElement("canvas");
+            var tmpCanvas = new this.ImageCanvas(w, h);
-            tmpCanvas.width = w;
+            // var tmpCanvas = document.createElement("canvas");
-            tmpCanvas.height = h;
+            // tmpCanvas.width = w;
-            var tmpCtx = tmpCanvas.getContext("2d");
+            // tmpCanvas.height = h;
-            var imgData = tmpCtx.getImageData(0, 0, w, h);
+            //
+            // var tmpCtx = tmpCanvas.getContext("2d");
+            // var imgData = tmpCtx.getImageData(0, 0, w, h);
+            // var pixels = imgData.data;
+            var imgData = tmpCanvas.imgData;
             var pixels = imgData.data;
 
             if (bitsPerComponent != 8)
@@ -3399,8 +3423,9 @@ var CanvasGraphics = (function() {
                     TODO("Images with "+ numComps + " components per pixel");
                 }
             }
-            tmpCtx.putImageData(imgData, 0, 0);
+            console.log("paintImageXObject", w, h);
-            ctx.drawImage(tmpCanvas, 0, -h);
+            tmpCanvas.putImageData(imgData, 0, 0);
+            ctx.drawImage(tmpCanvas.getCanvas(), 0, -h);
             this.restore();
         },