GUACAMOLE-187: Reduce the number of full canvas copies that occur when continuously resizing a layer.

guacamole-common-js/src/main/webapp/modules/Layer.js

@@ -42,6 +42,17 @@ Guacamole.Layer = function(width, height) {
      */
     var layer = this;
 
+    /**
+     * The number of pixels the width or height of a layer must change before
+     * the underlying canvas is resized. The underlying canvas will be kept at
+     * dimensions which are integer multiples of this factor.
+     *
+     * @private
+     * @constant
+     * @type Number
+     */
+    var CANVAS_SIZE_FACTOR = 64;
+
     /**
      * The canvas element backing this Layer.
      * @private
@@ -98,57 +109,78 @@ Guacamole.Layer = function(width, height) {
     };
 
     /**
-     * Resizes the canvas element backing this Layer without testing the
+     * Resizes the canvas element backing this Layer. This function should only
-     * new size. This function should only be used internally.
+     * be used internally.
      * 
      * @private
-     * @param {Number} newWidth The new width to assign to this Layer.
+     * @param {Number} [newWidth=0]
-     * @param {Number} newHeight The new height to assign to this Layer.
+     *     The new width to assign to this Layer.
+     *
+     * @param {Number} [newHeight=0]
+     *     The new height to assign to this Layer.
      */
-    function resize(newWidth, newHeight) {
+    var resize = function resize(newWidth, newHeight) {
 
-        // Only preserve old data if width/height are both non-zero
+        // Default size to zero
-        var oldData = null;
+        newWidth = newWidth || 0;
-        if (layer.width !== 0 && layer.height !== 0) {
+        newHeight = newHeight || 0;
 
-            // Create canvas and context for holding old data
+        // Calculate new dimensions of internal canvas
-            oldData = document.createElement("canvas");
+        var canvasWidth  = Math.ceil(newWidth  / CANVAS_SIZE_FACTOR) * CANVAS_SIZE_FACTOR;
-            oldData.width = layer.width;
+        var canvasHeight = Math.ceil(newHeight / CANVAS_SIZE_FACTOR) * CANVAS_SIZE_FACTOR;
-            oldData.height = layer.height;
 
-            var oldDataContext = oldData.getContext("2d");
+        // Resize only if canvas dimensions are actually changing
+        if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
 
-            // Copy image data from current
+            // Copy old data only if relevant
-            oldDataContext.drawImage(canvas,
+            var oldData = null;
-                    0, 0, layer.width, layer.height,
+            if (canvas.width !== 0 && canvas.height !== 0) {
-                    0, 0, layer.width, layer.height);
+
+                // Create canvas and context for holding old data
+                oldData = document.createElement("canvas");
+                oldData.width = Math.min(layer.width, newWidth);
+                oldData.height = Math.min(layer.height, newHeight);
+
+                var oldDataContext = oldData.getContext("2d");
+
+                // Copy image data from current
+                oldDataContext.drawImage(canvas,
+                        0, 0, oldData.width, oldData.height,
+                        0, 0, oldData.width, oldData.height);
+
+            }
+
+            // Preserve composite operation
+            var oldCompositeOperation = context.globalCompositeOperation;
+
+            // Resize canvas
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
+
+            // Redraw old data, if any
+            if (oldData)
+                context.drawImage(oldData,
+                    0, 0, oldData.width, oldData.height,
+                    0, 0, oldData.width, oldData.height);
+
+            // Restore composite operation
+            context.globalCompositeOperation = oldCompositeOperation;
+
+            // Acknowledge reset of stack (happens on resize of canvas)
+            stackSize = 0;
+            context.save();
 
         }
 
-        // Preserve composite operation
+        // If the canvas size is not changing, manually force state reset
-        var oldCompositeOperation = context.globalCompositeOperation;
+        else
-
+            layer.reset();
-        // Resize canvas
-        canvas.width = newWidth;
-        canvas.height = newHeight;
-
-        // Redraw old data, if any
-        if (oldData)
-                context.drawImage(oldData, 
-                    0, 0, layer.width, layer.height,
-                    0, 0, layer.width, layer.height);
-
-        // Restore composite operation
-        context.globalCompositeOperation = oldCompositeOperation;
 
+        // Assign new layer dimensions
         layer.width = newWidth;
         layer.height = newHeight;
 
-        // Acknowledge reset of stack (happens on resize of canvas)
+    };
-        stackSize = 0;
-        context.save();
-
-    }
 
     /**
      * Given the X and Y coordinates of the upper-left corner of a rectangle
@@ -781,8 +813,7 @@ Guacamole.Layer = function(width, height) {
     };
 
     // Initialize canvas dimensions
-    canvas.width = width;
+    resize(width, height);
-    canvas.height = height;
 
     // Explicitly render canvas below other elements in the layer (such as
     // child layers). Chrome and others may fail to render layers properly