Add PatternProxy; makes page 13 work

canvas_proxy.js

@@ -61,6 +61,20 @@ function GradientProxy(stack, x0, y0, x1, y1) {
     }
 }
 
+var patternProxyCounter = 0;
+function PatternProxy(stack, object, kind) {
+    this.id = patternProxyCounter++;
+
+    if (!(object instanceof CanvasProxy) ) {
+        throw "unkown type to createPattern";
+    }
+    // Flush the object here to ensure it's available on the main thread.
+    // TODO: Make some kind of dependency management, such that the object
+    // gets flushed only if needed.
+    object.flush();
+    stack.push(["$createPatternFromCanvas", [this.id, object.id, kind]]);
+}
+
 var canvasProxyCounter = 0;
 function CanvasProxy(width, height) {
     this.id = canvasProxyCounter++;
@@ -76,10 +90,6 @@ function CanvasProxy(width, height) {
         return ctx;
     }
 
-    this.getCanvas = function() {
-        return this;
-    }
-
     // Expose only the minimum of the canvas object - there is no dom to do
     // more here.
     this.width = width;
@@ -105,7 +115,7 @@ function CanvasProxy(width, height) {
         "transform",
         "setTransform",
         // "createLinearGradient",
-        "createPattern",
+        // "createPattern",
         "clearRect",
         "fillRect",
         "strokeRect",
@@ -129,6 +139,10 @@ function CanvasProxy(width, height) {
         "$showText"
     ];
 
+    ctx.createPattern = function(object, kind) {
+        return new PatternProxy(stack, object, kind);
+    }
+
     ctx.createLinearGradient = function(x0, y0, x1, y1) {
         return new GradientProxy(stack, x0, y0, x1, y1);
     }
@@ -219,6 +233,8 @@ function CanvasProxy(width, height) {
                 return function(value) {
                     if (value instanceof GradientProxy) {
                         stack.push(["$" + name + "Gradient"]);
+                    } else if (value instanceof PatternProxy) {
+                        stack.push(["$" + name + "Pattern", [value.id]]);
                     } else {
                         stack.push(["$", name, value]);
                         return ctx["$" + name] = value;

pdf.js

@@ -2273,15 +2273,8 @@ function ScratchCanvas(width, height) {
     var canvas = document.createElement("canvas");
     canvas.width = width;
     canvas.height = height;
-
-    this.getContext = function(kind) {
-        return canvas.getContext(kind);
-    }
-
-    this.getCanvas = function() {
     return canvas;
 }
-}
 
 var CanvasGraphics = (function() {
     function constructor(canvasCtx, imageCanvas) {
@@ -3021,10 +3014,10 @@ var CanvasGraphics = (function() {
             // we want the canvas to be as large as the step size
             var botRight = applyMatrix([x0 + xstep, y0 + ystep], matrix);
 
-            var tmpCanvas = document.createElement("canvas");
+            var tmpCanvas = new this.ScratchCanvas(
-            tmpCanvas.width = Math.ceil(botRight[0] - topLeft[0]);
+                Math.ceil(botRight[0] - topLeft[0]),    // WIDTH
-            tmpCanvas.height = Math.ceil(botRight[1] - topLeft[1]);
+                Math.ceil(botRight[1] - topLeft[1])     // HEIGHT
-            console.log("tilingFill", tmpCanvas.width, tmpCanvas.height);
+            );
 
             // set the new canvas element context as the graphics context
             var tmpCtx = tmpCanvas.getContext("2d");
@@ -3265,7 +3258,6 @@ var CanvasGraphics = (function() {
                 ctx.drawImage(domImage, 0, 0, domImage.width, domImage.height,
                               0, -h, w, h);
                 this.restore();
-                console.log("drawImage");
                 return;
             }
 
@@ -3415,7 +3407,7 @@ var CanvasGraphics = (function() {
                 }
             }
             tmpCtx.putImageData(imgData, 0, 0);
-            ctx.drawImage(tmpCanvas.getCanvas(), 0, -h);
+            ctx.drawImage(tmpCanvas, 0, -h);
             this.restore();
         },
 

viewer_worker.html

@@ -15,6 +15,7 @@ function toc(msg) {
 var myWorker = new Worker('worker.js');
 var imagesList = {};
 var canvasList = {};
+var patternList = {};
 var gradient;
 
 var currentX = 0;
@@ -78,6 +79,14 @@ var special = {
         gradient = this.createLinearGradient(x0, y0, x1, y1);
     },
 
+    "$createPatternFromCanvas": function(patternId, canvasId, kind) {
+        var canvas = canvasList[canvasId];
+        if (!canvas) {
+            throw "Canvas not found";
+        }
+        patternList[patternId] = this.createPattern(canvas, kind);
+    },
+
     "$addColorStop": function(i, rgba) {
         gradient.addColorStop(i, rgba);
     },
@@ -86,8 +95,24 @@ var special = {
         this.fillStyle = gradient;
     },
 
+    "$fillStylePattern": function(id) {
+        var pattern = patternList[id];
+        if (!pattern) {
+            throw "Pattern not found";
+        }
+        this.fillStyle = pattern;
+    },
+
     "$strokeStyleGradient": function() {
         this.strokeStyle = gradient;
+    },
+
+    "$strokeStylePattern": function(id) {
+        var pattern = patternList[id];
+        if (!pattern) {
+            throw "Pattern not found";
+        }
+        this.strokeStyle = pattern;
     }
 }
 
@@ -237,7 +262,7 @@ function open(url) {
         var data = req.mozResponseArrayBuffer || req.mozResponse ||
                    req.responseArrayBuffer || req.response;
         myWorker.postMessage(data);
-        showPage("11");
+        showPage("13");
       }
     };
     req.send(null);