Merge pull request #3179 from yurydelendik/pr-3171

Cont of #3171, Reusing pattern canvas fixes

src/canvas.js

@@ -57,6 +57,7 @@ function addContextCurrentTransform(ctx) {
     ctx._originalScale = ctx.scale;
     ctx._originalTranslate = ctx.translate;
     ctx._originalTransform = ctx.transform;
+    ctx._originalSetTransform = ctx.setTransform;
 
     ctx._transformMatrix = [ctx._scaleX, 0, 0, ctx._scaleY, 0, 0];
     ctx._transformStack = [];
@@ -138,6 +139,12 @@ function addContextCurrentTransform(ctx) {
       ctx._originalTransform(a, b, c, d, e, f);
     };
 
+    ctx.setTransform = function ctxSetTransform(a, b, c, d, e, f) {
+      this._transformMatrix = [a, b, c, d, e, f];
+
+      ctx._originalSetTransform(a, b, c, d, e, f);
+    };
+
     ctx.rotate = function ctxRotate(angle) {
       var cosValue = Math.cos(angle);
       var sinValue = Math.sin(angle);

src/pattern.js

@@ -20,6 +20,10 @@
 
 'use strict';
 
+// This global variable is used to minimize the memory usage when patterns are
+// used.
+var temporaryPatternCanvas = null;
+
 var PatternType = {
   AXIAL: 2,
   RADIAL: 3
@@ -268,23 +272,55 @@ var TilingPattern = (function TilingPatternClosure() {
     COLORED: 1,
     UNCOLORED: 2
   };
-  var MAX_PATTERN_SIZE = 4096;
+
+  var MAX_PATTERN_SIZE = 8192;
 
   function TilingPattern(IR, color, ctx, objs, commonObjs) {
-    var operatorList = IR[2];
+    this.name = IR[1][0].name;
+    this.operatorList = IR[2];
     this.matrix = IR[3] || [1, 0, 0, 1, 0, 0];
-    var bbox = IR[4];
+    this.bbox = IR[4];
-    var xstep = IR[5];
+    this.xstep = IR[5];
-    var ystep = IR[6];
+    this.ystep = IR[6];
-    var paintType = IR[7];
+    this.paintType = IR[7];
-    var tilingType = IR[8];
+    this.tilingType = IR[8];
+    this.color = color;
+    this.objs = objs;
+    this.commonObjs = commonObjs;
+    this.curMatrix = ctx.mozCurrentTransform;
+    this.type = 'Pattern';
+    this.ctx = ctx;
+  }
+
+  TilingPattern.getIR = function TilingPattern_getIR(operatorList, dict, args) {
+    var matrix = dict.get('Matrix');
+    var bbox = dict.get('BBox');
+    var xstep = dict.get('XStep');
+    var ystep = dict.get('YStep');
+    var paintType = dict.get('PaintType');
+    var tilingType = dict.get('TilingType');
+
+    return [
+      'TilingPattern', args, operatorList, matrix, bbox, xstep, ystep,
+      paintType, tilingType
+    ];
+  };
+
+  TilingPattern.prototype = {
+    createPatternCanvas: function TilinPattern_createPatternCanvas(tmpCanvas) {
+      var operatorList = this.operatorList;
+      var bbox = this.bbox;
+      var xstep = this.xstep;
+      var ystep = this.ystep;
+      var paintType = this.paintType;
+      var tilingType = this.tilingType;
+      var color = this.color;
+      var objs = this.objs;
+      var commonObjs = this.commonObjs;
+      var ctx = this.ctx;
 
       TODO('TilingType: ' + tilingType);
 
-    this.curMatrix = ctx.mozCurrentTransform;
-    this.ctx = ctx;
-    this.type = 'Pattern';
-
       var x0 = bbox[0], y0 = bbox[1], x1 = bbox[2], y1 = bbox[3];
 
       var topLeft = [x0, y0];
@@ -310,10 +346,14 @@ var TilingPattern = (function TilingPatternClosure() {
       height = Math.min(Math.ceil(Math.abs(height * combinedScale[1])),
                         MAX_PATTERN_SIZE);
 
-    var tmpCanvas = createScratchCanvas(width, height);
+      tmpCanvas.width = width;
+      tmpCanvas.height = height;
 
       // set the new canvas element context as the graphics context
       var tmpCtx = tmpCanvas.getContext('2d');
+      // for simulated mozCurrentTransform canvas (normaly setting width/height
+      // will reset the matrix)
+      tmpCtx.setTransform(1, 0, 0, 1, 0, 0);
       var graphics = new CanvasGraphics(tmpCtx, commonObjs, objs);
 
       this.setFillAndStrokeStyleToContext(tmpCtx, paintType, color);
@@ -328,25 +368,8 @@ var TilingPattern = (function TilingPatternClosure() {
       this.clipBbox(graphics, bbox, x0, y0, x1, y1);
 
       graphics.executeOperatorList(operatorList);
+    },
 
-    this.canvas = tmpCanvas;
-  }
-
-  TilingPattern.getIR = function TilingPattern_getIR(operatorList, dict, args) {
-    var matrix = dict.get('Matrix');
-    var bbox = dict.get('BBox');
-    var xstep = dict.get('XStep');
-    var ystep = dict.get('YStep');
-    var paintType = dict.get('PaintType');
-    var tilingType = dict.get('TilingType');
-
-    return [
-      'TilingPattern', args, operatorList, matrix, bbox, xstep, ystep,
-      paintType, tilingType
-    ];
-  };
-
-  TilingPattern.prototype = {
     setScale: function TilingPattern_setScale(width, height, xstep, ystep) {
       this.scale = [width / xstep, height / ystep];
     },
@@ -392,15 +415,19 @@ var TilingPattern = (function TilingPatternClosure() {
     },
 
     getPattern: function TilingPattern_getPattern() {
-      var matrix = this.matrix;
+      // The temporary canvas is created only because the memory is released
-      var curMatrix = this.curMatrix;
+      // more quickly than creating multiple temporary canvases.
-      var ctx = this.ctx;
+      if (temporaryPatternCanvas === null) {
+        temporaryPatternCanvas = createScratchCanvas(1, 1);
+      }
+      this.createPatternCanvas(temporaryPatternCanvas);
 
-      ctx.setTransform.apply(ctx, curMatrix);
+      var ctx = this.ctx;
-      ctx.transform.apply(ctx, matrix);
+      ctx.setTransform.apply(ctx, this.curMatrix);
+      ctx.transform.apply(ctx, this.matrix);
       this.scaleToContext();
 
-      return ctx.createPattern(this.canvas, 'repeat');
+      return ctx.createPattern(temporaryPatternCanvas, 'repeat');
     }
   };