Provide means of retrieving a canvas with the same dimensions and content as a layer.
@@ -267,13 +267,41 @@ Guacamole.Layer = function(width, height) {
this.height = height;
/**
- * Returns the canvas element backing this Layer.
- * @returns {Element} The canvas element backing this Layer.
+ * Returns the canvas element backing this Layer. Note that the dimensions
+ * 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
