GUACAMOLE-230: Provide means of retrieving a canvas with the same dimensions and content as a layer.

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

@@ -267,13 +267,41 @@ Guacamole.Layer = function(width, height) {
     this.height = height;
 
     /**
-     * Returns the canvas element backing this Layer.
+     * Returns the canvas element backing this Layer. Note that the dimensions
-     * @returns {Element} The canvas element backing this Layer.
+     * of the canvas may not exactly match those of the Layer, as resizing a
+     * canvas while maintaining its state is an expensive operation.
+     *
+     * @returns {HTMLCanvasElement}
+     *     The canvas element backing this Layer.
      */
-    this.getCanvas = function() {
+    this.getCanvas = function getCanvas() {
         return canvas;
     };
 
+    /**
+     * Returns a new canvas element containing the same image as this Layer.
+     * Unlike getCanvas(), the canvas element returned is guaranteed to have
+     * the exact same dimensions as the Layer.
+     *
+     * @returns {HTMLCanvasElement}
+     *     A new canvas element containing a copy of the image content this
+     *     Layer.
+     */
+    this.toCanvas = function toCanvas() {
+
+        // Create new canvas having same dimensions
+        var canvas = document.createElement('canvas');
+        canvas.width = layer.width;
+        canvas.height = layer.height;
+
+        // Copy image contents to new canvas
+        var context = canvas.getContext('2d');
+        context.drawImage(layer.getCanvas(), 0, 0);
+
+        return canvas;
+
+    };
+
     /**
      * Changes the size of this Layer to the given width and height. Resizing
      * is only attempted if the new size provided is actually different from