Source: Layer.js

  1. /*
  2.  * Licensed to the Apache Software Foundation (ASF) under one
  3.  * or more contributor license agreements.  See the NOTICE file
  4.  * distributed with this work for additional information
  5.  * regarding copyright ownership.  The ASF licenses this file
  6.  * to you under the Apache License, Version 2.0 (the
  7.  * "License"); you may not use this file except in compliance
  8.  * with the License.  You may obtain a copy of the License at
  9.  *
  10.  *   http://www.apache.org/licenses/LICENSE-2.0
  11.  *
  12.  * Unless required by applicable law or agreed to in writing,
  13.  * software distributed under the License is distributed on an
  14.  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15.  * KIND, either express or implied.  See the License for the
  16.  * specific language governing permissions and limitations
  17.  * under the License.
  18.  */
  20. var Guacamole = Guacamole || {};
  22. /**
  23.  * Abstract ordered drawing surface. Each Layer contains a canvas element and
  24.  * provides simple drawing instructions for drawing to that canvas element,
  25.  * however unlike the canvas element itself, drawing operations on a Layer are
  26.  * guaranteed to run in order, even if such an operation must wait for an image
  27.  * to load before completing.
  28.  * 
  29.  * @constructor
  30.  * 
  31.  * @param {Number} width The width of the Layer, in pixels. The canvas element
  32.  *                       backing this Layer will be given this width.
  33.  *                       
  34.  * @param {Number} height The height of the Layer, in pixels. The canvas element
  35.  *                        backing this Layer will be given this height.
  36.  */
  37. Guacamole.Layer = function(width, height) {
  39.     /**
  40.      * Reference to this Layer.
  41.      * @private
  42.      */
  43.     var layer = this;
  45.     /**
  46.      * The number of pixels the width or height of a layer must change before
  47.      * the underlying canvas is resized. The underlying canvas will be kept at
  48.      * dimensions which are integer multiples of this factor.
  49.      *
  50.      * @private
  51.      * @constant
  52.      * @type Number
  53.      */
  54.     var CANVAS_SIZE_FACTOR = 64;
  56.     /**
  57.      * The canvas element backing this Layer.
  58.      * @private
  59.      */
  60.     var canvas = document.createElement("canvas");
  62.     /**
  63.      * The 2D display context of the canvas element backing this Layer.
  64.      * @private
  65.      */
  66.     var context = canvas.getContext("2d");
  67.     context.save();
  69.     /**
  70.      * Whether the layer has not yet been drawn to. Once any draw operation
  71.      * which affects the underlying canvas is invoked, this flag will be set to
  72.      * false.
  73.      *
  74.      * @private
  75.      * @type Boolean
  76.      */
  77.     var empty = true;
  79.     /**
  80.      * Whether a new path should be started with the next path drawing
  81.      * operations.
  82.      * @private
  83.      */
  84.     var pathClosed = true;
  86.     /**
  87.      * The number of states on the state stack.
  88.      * 
  89.      * Note that there will ALWAYS be one element on the stack, but that
  90.      * element is not exposed. It is only used to reset the layer to its
  91.      * initial state.
  92.      * 
  93.      * @private
  94.      */
  95.     var stackSize = 0;
  97.     /**
  98.      * Map of all Guacamole channel masks to HTML5 canvas composite operation
  99.      * names. Not all channel mask combinations are currently implemented.
  100.      * @private
  101.      */
  102.     var compositeOperation = {
  103.      /* 0x0 NOT IMPLEMENTED */
  104.         0x1: "destination-in",
  105.         0x2: "destination-out",
  106.      /* 0x3 NOT IMPLEMENTED */
  107.         0x4: "source-in",
  108.      /* 0x5 NOT IMPLEMENTED */
  109.         0x6: "source-atop",
  110.      /* 0x7 NOT IMPLEMENTED */
  111.         0x8: "source-out",
  112.         0x9: "destination-atop",
  113.         0xA: "xor",
  114.         0xB: "destination-over",
  115.         0xC: "copy",
  116.      /* 0xD NOT IMPLEMENTED */
  117.         0xE: "source-over",
  118.         0xF: "lighter"
  119.     };
  121.     /**
  122.      * Resizes the canvas element backing this Layer. This function should only
  123.      * be used internally.
  124.      * 
  125.      * @private
  126.      * @param {Number} [newWidth=0]
  127.      *     The new width to assign to this Layer.
  128.      *
  129.      * @param {Number} [newHeight=0]
  130.      *     The new height to assign to this Layer.
  131.      */
  132.     var resize = function resize(newWidth, newHeight) {
  134.         // Default size to zero
  135.         newWidth = newWidth || 0;
  136.         newHeight = newHeight || 0;
  138.         // Calculate new dimensions of internal canvas
  139.         var canvasWidth  = Math.ceil(newWidth  / CANVAS_SIZE_FACTOR) * CANVAS_SIZE_FACTOR;
  140.         var canvasHeight = Math.ceil(newHeight / CANVAS_SIZE_FACTOR) * CANVAS_SIZE_FACTOR;
  142.         // Resize only if canvas dimensions are actually changing
  143.         if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
  145.             // Copy old data only if relevant and non-empty
  146.             var oldData = null;
  147.             if (!empty && canvas.width !== 0 && canvas.height !== 0) {
  149.                 // Create canvas and context for holding old data
  150.                 oldData = document.createElement("canvas");
  151.                 oldData.width = Math.min(layer.width, newWidth);
  152.                 oldData.height = Math.min(layer.height, newHeight);
  154.                 var oldDataContext = oldData.getContext("2d");
  156.                 // Copy image data from current
  157.                 oldDataContext.drawImage(canvas,
  158.                         0, 0, oldData.width, oldData.height,
  159.                         0, 0, oldData.width, oldData.height);
  161.             }
  163.             // Preserve composite operation
  164.             var oldCompositeOperation = context.globalCompositeOperation;
  166.             // Resize canvas
  167.             canvas.width = canvasWidth;
  168.             canvas.height = canvasHeight;
  170.             // Redraw old data, if any
  171.             if (oldData)
  172.                 context.drawImage(oldData,
  173.                     0, 0, oldData.width, oldData.height,
  174.                     0, 0, oldData.width, oldData.height);
  176.             // Restore composite operation
  177.             context.globalCompositeOperation = oldCompositeOperation;
  179.             // Acknowledge reset of stack (happens on resize of canvas)
  180.             stackSize = 0;
  181.             context.save();
  183.         }
  185.         // If the canvas size is not changing, manually force state reset
  186.         else
  187.             layer.reset();
  189.         // Assign new layer dimensions
  190.         layer.width = newWidth;
  191.         layer.height = newHeight;
  193.     };
  195.     /**
  196.      * Given the X and Y coordinates of the upper-left corner of a rectangle
  197.      * and the rectangle's width and height, resize the backing canvas element
  198.      * as necessary to ensure that the rectangle fits within the canvas
  199.      * element's coordinate space. This function will only make the canvas
  200.      * larger. If the rectangle already fits within the canvas element's
  201.      * coordinate space, the canvas is left unchanged.
  202.      * 
  203.      * @private
  204.      * @param {Number} x The X coordinate of the upper-left corner of the
  205.      *                   rectangle to fit.
  206.      * @param {Number} y The Y coordinate of the upper-left corner of the
  207.      *                   rectangle to fit.
  208.      * @param {Number} w The width of the the rectangle to fit.
  209.      * @param {Number} h The height of the the rectangle to fit.
  210.      */
  211.     function fitRect(x, y, w, h) {
  212.         
  213.         // Calculate bounds
  214.         var opBoundX = w + x;
  215.         var opBoundY = h + y;
  216.         
  217.         // Determine max width
  218.         var resizeWidth;
  219.         if (opBoundX > layer.width)
  220.             resizeWidth = opBoundX;
  221.         else
  222.             resizeWidth = layer.width;
  224.         // Determine max height
  225.         var resizeHeight;
  226.         if (opBoundY > layer.height)
  227.             resizeHeight = opBoundY;
  228.         else
  229.             resizeHeight = layer.height;
  231.         // Resize if necessary
  232.         layer.resize(resizeWidth, resizeHeight);
  234.     }
  236.     /**
  237.      * Set to true if this Layer should resize itself to accomodate the
  238.      * dimensions of any drawing operation, and false (the default) otherwise.
  239.      * 
  240.      * Note that setting this property takes effect immediately, and thus may
  241.      * take effect on operations that were started in the past but have not
  242.      * yet completed. If you wish the setting of this flag to only modify
  243.      * future operations, you will need to make the setting of this flag an
  244.      * operation with sync().
  245.      * 
  246.      * @example
  247.      * // Set autosize to true for all future operations
  248.      * layer.sync(function() {
  249.      *     layer.autosize = true;
  250.      * });
  251.      * 
  252.      * @type {Boolean}
  253.      * @default false
  254.      */
  255.     this.autosize = false;
  257.     /**
  258.      * The current width of this layer.
  259.      * @type {Number}
  260.      */
  261.     this.width = width;
  263.     /**
  264.      * The current height of this layer.
  265.      * @type {Number}
  266.      */
  267.     this.height = height;
  269.     /**
  270.      * Returns the canvas element backing this Layer. Note that the dimensions
  271.      * of the canvas may not exactly match those of the Layer, as resizing a
  272.      * canvas while maintaining its state is an expensive operation.
  273.      *
  274.      * @returns {HTMLCanvasElement}
  275.      *     The canvas element backing this Layer.
  276.      */
  277.     this.getCanvas = function getCanvas() {
  278.         return canvas;
  279.     };
  281.     /**
  282.      * Returns a new canvas element containing the same image as this Layer.
  283.      * Unlike getCanvas(), the canvas element returned is guaranteed to have
  284.      * the exact same dimensions as the Layer.
  285.      *
  286.      * @returns {HTMLCanvasElement}
  287.      *     A new canvas element containing a copy of the image content this
  288.      *     Layer.
  289.      */
  290.     this.toCanvas = function toCanvas() {
  292.         // Create new canvas having same dimensions
  293.         var canvas = document.createElement('canvas');
  294.         canvas.width = layer.width;
  295.         canvas.height = layer.height;
  297.         // Copy image contents to new canvas
  298.         var context = canvas.getContext('2d');
  299.         context.drawImage(layer.getCanvas(), 0, 0);
  301.         return canvas;
  303.     };
  305.     /**
  306.      * Changes the size of this Layer to the given width and height. Resizing
  307.      * is only attempted if the new size provided is actually different from
  308.      * the current size.
  309.      * 
  310.      * @param {Number} newWidth The new width to assign to this Layer.
  311.      * @param {Number} newHeight The new height to assign to this Layer.
  312.      */
  313.     this.resize = function(newWidth, newHeight) {
  314.         if (newWidth !== layer.width || newHeight !== layer.height)
  315.             resize(newWidth, newHeight);
  316.     };
  318.     /**
  319.      * Draws the specified image at the given coordinates. The image specified
  320.      * must already be loaded.
  321.      * 
  322.      * @param {Number} x The destination X coordinate.
  323.      * @param {Number} y The destination Y coordinate.
  324.      * @param {Image} image The image to draw. Note that this is an Image
  325.      *                      object - not a URL.
  326.      */
  327.     this.drawImage = function(x, y, image) {
  328.         if (layer.autosize) fitRect(x, y, image.width, image.height);
  329.         context.drawImage(image, x, y);
  330.         empty = false;
  331.     };
  333.     /**
  334.      * Transfer a rectangle of image data from one Layer to this Layer using the
  335.      * specified transfer function.
  336.      * 
  337.      * @param {Guacamole.Layer} srcLayer The Layer to copy image data from.
  338.      * @param {Number} srcx The X coordinate of the upper-left corner of the
  339.      *                      rectangle within the source Layer's coordinate
  340.      *                      space to copy data from.
  341.      * @param {Number} srcy The Y coordinate of the upper-left corner of the
  342.      *                      rectangle within the source Layer's coordinate
  343.      *                      space to copy data from.
  344.      * @param {Number} srcw The width of the rectangle within the source Layer's
  345.      *                      coordinate space to copy data from.
  346.      * @param {Number} srch The height of the rectangle within the source
  347.      *                      Layer's coordinate space to copy data from.
  348.      * @param {Number} x The destination X coordinate.
  349.      * @param {Number} y The destination Y coordinate.
  350.      * @param {Function} transferFunction The transfer function to use to
  351.      *                                    transfer data from source to
  352.      *                                    destination.
  353.      */
  354.     this.transfer = function(srcLayer, srcx, srcy, srcw, srch, x, y, transferFunction) {
  356.         var srcCanvas = srcLayer.getCanvas();
  358.         // If entire rectangle outside source canvas, stop
  359.         if (srcx >= srcCanvas.width || srcy >= srcCanvas.height) return;
  361.         // Otherwise, clip rectangle to area
  362.         if (srcx + srcw > srcCanvas.width)
  363.             srcw = srcCanvas.width - srcx;
  365.         if (srcy + srch > srcCanvas.height)
  366.             srch = srcCanvas.height - srcy;
  368.         // Stop if nothing to draw.
  369.         if (srcw === 0 || srch === 0) return;
  371.         if (layer.autosize) fitRect(x, y, srcw, srch);
  373.         // Get image data from src and dst
  374.         var src = srcLayer.getCanvas().getContext("2d").getImageData(srcx, srcy, srcw, srch);
  375.         var dst = context.getImageData(x , y, srcw, srch);
  377.         // Apply transfer for each pixel
  378.         for (var i=0; i<srcw*srch*4; i+=4) {
  380.             // Get source pixel environment
  381.             var src_pixel = new Guacamole.Layer.Pixel(
  382.                 src.data[i],
  383.                 src.data[i+1],
  384.                 src.data[i+2],
  385.                 src.data[i+3]
  386.             );
  387.                 
  388.             // Get destination pixel environment
  389.             var dst_pixel = new Guacamole.Layer.Pixel(
  390.                 dst.data[i],
  391.                 dst.data[i+1],
  392.                 dst.data[i+2],
  393.                 dst.data[i+3]
  394.             );
  396.             // Apply transfer function
  397.             transferFunction(src_pixel, dst_pixel);
  399.             // Save pixel data
  400.             dst.data[i  ] = dst_pixel.red;
  401.             dst.data[i+1] = dst_pixel.green;
  402.             dst.data[i+2] = dst_pixel.blue;
  403.             dst.data[i+3] = dst_pixel.alpha;
  405.         }
  407.         // Draw image data
  408.         context.putImageData(dst, x, y);
  409.         empty = false;
  411.     };
  413.     /**
  414.      * Put a rectangle of image data from one Layer to this Layer directly
  415.      * without performing any alpha blending. Simply copy the data.
  416.      * 
  417.      * @param {Guacamole.Layer} srcLayer The Layer to copy image data from.
  418.      * @param {Number} srcx The X coordinate of the upper-left corner of the
  419.      *                      rectangle within the source Layer's coordinate
  420.      *                      space to copy data from.
  421.      * @param {Number} srcy The Y coordinate of the upper-left corner of the
  422.      *                      rectangle within the source Layer's coordinate
  423.      *                      space to copy data from.
  424.      * @param {Number} srcw The width of the rectangle within the source Layer's
  425.      *                      coordinate space to copy data from.
  426.      * @param {Number} srch The height of the rectangle within the source
  427.      *                      Layer's coordinate space to copy data from.
  428.      * @param {Number} x The destination X coordinate.
  429.      * @param {Number} y The destination Y coordinate.
  430.      */
  431.     this.put = function(srcLayer, srcx, srcy, srcw, srch, x, y) {
  433.         var srcCanvas = srcLayer.getCanvas();
  435.         // If entire rectangle outside source canvas, stop
  436.         if (srcx >= srcCanvas.width || srcy >= srcCanvas.height) return;
  438.         // Otherwise, clip rectangle to area
  439.         if (srcx + srcw > srcCanvas.width)
  440.             srcw = srcCanvas.width - srcx;
  442.         if (srcy + srch > srcCanvas.height)
  443.             srch = srcCanvas.height - srcy;
  445.         // Stop if nothing to draw.
  446.         if (srcw === 0 || srch === 0) return;
  448.         if (layer.autosize) fitRect(x, y, srcw, srch);
  450.         // Get image data from src and dst
  451.         var src = srcLayer.getCanvas().getContext("2d").getImageData(srcx, srcy, srcw, srch);
  452.         context.putImageData(src, x, y);
  453.         empty = false;
  455.     };
  457.     /**
  458.      * Copy a rectangle of image data from one Layer to this Layer. This
  459.      * operation will copy exactly the image data that will be drawn once all
  460.      * operations of the source Layer that were pending at the time this
  461.      * function was called are complete. This operation will not alter the
  462.      * size of the source Layer even if its autosize property is set to true.
  463.      * 
  464.      * @param {Guacamole.Layer} srcLayer The Layer to copy image data from.
  465.      * @param {Number} srcx The X coordinate of the upper-left corner of the
  466.      *                      rectangle within the source Layer's coordinate
  467.      *                      space to copy data from.
  468.      * @param {Number} srcy The Y coordinate of the upper-left corner of the
  469.      *                      rectangle within the source Layer's coordinate
  470.      *                      space to copy data from.
  471.      * @param {Number} srcw The width of the rectangle within the source Layer's
  472.      *                      coordinate space to copy data from.
  473.      * @param {Number} srch The height of the rectangle within the source
  474.      *                      Layer's coordinate space to copy data from.
  475.      * @param {Number} x The destination X coordinate.
  476.      * @param {Number} y The destination Y coordinate.
  477.      */
  478.     this.copy = function(srcLayer, srcx, srcy, srcw, srch, x, y) {
  480.         var srcCanvas = srcLayer.getCanvas();
  482.         // If entire rectangle outside source canvas, stop
  483.         if (srcx >= srcCanvas.width || srcy >= srcCanvas.height) return;
  485.         // Otherwise, clip rectangle to area
  486.         if (srcx + srcw > srcCanvas.width)
  487.             srcw = srcCanvas.width - srcx;
  489.         if (srcy + srch > srcCanvas.height)
  490.             srch = srcCanvas.height - srcy;
  492.         // Stop if nothing to draw.
  493.         if (srcw === 0 || srch === 0) return;
  495.         if (layer.autosize) fitRect(x, y, srcw, srch);
  496.         context.drawImage(srcCanvas, srcx, srcy, srcw, srch, x, y, srcw, srch);
  497.         empty = false;
  499.     };
  501.     /**
  502.      * Starts a new path at the specified point.
  503.      * 
  504.      * @param {Number} x The X coordinate of the point to draw.
  505.      * @param {Number} y The Y coordinate of the point to draw.
  506.      */
  507.     this.moveTo = function(x, y) {
  508.         
  509.         // Start a new path if current path is closed
  510.         if (pathClosed) {
  511.             context.beginPath();
  512.             pathClosed = false;
  513.         }
  514.         
  515.         if (layer.autosize) fitRect(x, y, 0, 0);
  516.         context.moveTo(x, y);
  518.     };
  520.     /**
  521.      * Add the specified line to the current path.
  522.      * 
  523.      * @param {Number} x The X coordinate of the endpoint of the line to draw.
  524.      * @param {Number} y The Y coordinate of the endpoint of the line to draw.
  525.      */
  526.     this.lineTo = function(x, y) {
  527.         
  528.         // Start a new path if current path is closed
  529.         if (pathClosed) {
  530.             context.beginPath();
  531.             pathClosed = false;
  532.         }
  533.         
  534.         if (layer.autosize) fitRect(x, y, 0, 0);
  535.         context.lineTo(x, y);
  536.         
  537.     };
  539.     /**
  540.      * Add the specified arc to the current path.
  541.      * 
  542.      * @param {Number} x The X coordinate of the center of the circle which
  543.      *                   will contain the arc.
  544.      * @param {Number} y The Y coordinate of the center of the circle which
  545.      *                   will contain the arc.
  546.      * @param {Number} radius The radius of the circle.
  547.      * @param {Number} startAngle The starting angle of the arc, in radians.
  548.      * @param {Number} endAngle The ending angle of the arc, in radians.
  549.      * @param {Boolean} negative Whether the arc should be drawn in order of
  550.      *                           decreasing angle.
  551.      */
  552.     this.arc = function(x, y, radius, startAngle, endAngle, negative) {
  553.         
  554.         // Start a new path if current path is closed
  555.         if (pathClosed) {
  556.             context.beginPath();
  557.             pathClosed = false;
  558.         }
  559.         
  560.         if (layer.autosize) fitRect(x, y, 0, 0);
  561.         context.arc(x, y, radius, startAngle, endAngle, negative);
  562.         
  563.     };
  565.     /**
  566.      * Starts a new path at the specified point.
  567.      * 
  568.      * @param {Number} cp1x The X coordinate of the first control point.
  569.      * @param {Number} cp1y The Y coordinate of the first control point.
  570.      * @param {Number} cp2x The X coordinate of the second control point.
  571.      * @param {Number} cp2y The Y coordinate of the second control point.
  572.      * @param {Number} x The X coordinate of the endpoint of the curve.
  573.      * @param {Number} y The Y coordinate of the endpoint of the curve.
  574.      */
  575.     this.curveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
  576.         
  577.         // Start a new path if current path is closed
  578.         if (pathClosed) {
  579.             context.beginPath();
  580.             pathClosed = false;
  581.         }
  582.         
  583.         if (layer.autosize) fitRect(x, y, 0, 0);
  584.         context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
  585.         
  586.     };
  588.     /**
  589.      * Closes the current path by connecting the end point with the start
  590.      * point (if any) with a straight line.
  591.      */
  592.     this.close = function() {
  593.         context.closePath();
  594.         pathClosed = true;
  595.     };
  597.     /**
  598.      * Add the specified rectangle to the current path.
  599.      * 
  600.      * @param {Number} x The X coordinate of the upper-left corner of the
  601.      *                   rectangle to draw.
  602.      * @param {Number} y The Y coordinate of the upper-left corner of the
  603.      *                   rectangle to draw.
  604.      * @param {Number} w The width of the rectangle to draw.
  605.      * @param {Number} h The height of the rectangle to draw.
  606.      */
  607.     this.rect = function(x, y, w, h) {
  608.             
  609.         // Start a new path if current path is closed
  610.         if (pathClosed) {
  611.             context.beginPath();
  612.             pathClosed = false;
  613.         }
  614.         
  615.         if (layer.autosize) fitRect(x, y, w, h);
  616.         context.rect(x, y, w, h);
  617.         
  618.     };
  620.     /**
  621.      * Clip all future drawing operations by the current path. The current path
  622.      * is implicitly closed. The current path can continue to be reused
  623.      * for other operations (such as fillColor()) but a new path will be started
  624.      * once a path drawing operation (path() or rect()) is used.
  625.      */
  626.     this.clip = function() {
  628.         // Set new clipping region
  629.         context.clip();
  631.         // Path now implicitly closed
  632.         pathClosed = true;
  634.     };
  636.     /**
  637.      * Stroke the current path with the specified color. The current path
  638.      * is implicitly closed. The current path can continue to be reused
  639.      * for other operations (such as clip()) but a new path will be started
  640.      * once a path drawing operation (path() or rect()) is used.
  641.      * 
  642.      * @param {String} cap The line cap style. Can be "round", "square",
  643.      *                     or "butt".
  644.      * @param {String} join The line join style. Can be "round", "bevel",
  645.      *                      or "miter".
  646.      * @param {Number} thickness The line thickness in pixels.
  647.      * @param {Number} r The red component of the color to fill.
  648.      * @param {Number} g The green component of the color to fill.
  649.      * @param {Number} b The blue component of the color to fill.
  650.      * @param {Number} a The alpha component of the color to fill.
  651.      */
  652.     this.strokeColor = function(cap, join, thickness, r, g, b, a) {
  654.         // Stroke with color
  655.         context.lineCap = cap;
  656.         context.lineJoin = join;
  657.         context.lineWidth = thickness;
  658.         context.strokeStyle = "rgba(" + r + "," + g + "," + b + "," + a/255.0 + ")";
  659.         context.stroke();
  660.         empty = false;
  662.         // Path now implicitly closed
  663.         pathClosed = true;
  665.     };
  667.     /**
  668.      * Fills the current path with the specified color. The current path
  669.      * is implicitly closed. The current path can continue to be reused
  670.      * for other operations (such as clip()) but a new path will be started
  671.      * once a path drawing operation (path() or rect()) is used.
  672.      * 
  673.      * @param {Number} r The red component of the color to fill.
  674.      * @param {Number} g The green component of the color to fill.
  675.      * @param {Number} b The blue component of the color to fill.
  676.      * @param {Number} a The alpha component of the color to fill.
  677.      */
  678.     this.fillColor = function(r, g, b, a) {
  680.         // Fill with color
  681.         context.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a/255.0 + ")";
  682.         context.fill();
  683.         empty = false;
  685.         // Path now implicitly closed
  686.         pathClosed = true;
  688.     };
  690.     /**
  691.      * Stroke the current path with the image within the specified layer. The
  692.      * image data will be tiled infinitely within the stroke. The current path
  693.      * is implicitly closed. The current path can continue to be reused
  694.      * for other operations (such as clip()) but a new path will be started
  695.      * once a path drawing operation (path() or rect()) is used.
  696.      * 
  697.      * @param {String} cap The line cap style. Can be "round", "square",
  698.      *                     or "butt".
  699.      * @param {String} join The line join style. Can be "round", "bevel",
  700.      *                      or "miter".
  701.      * @param {Number} thickness The line thickness in pixels.
  702.      * @param {Guacamole.Layer} srcLayer The layer to use as a repeating pattern
  703.      *                                   within the stroke.
  704.      */
  705.     this.strokeLayer = function(cap, join, thickness, srcLayer) {
  707.         // Stroke with image data
  708.         context.lineCap = cap;
  709.         context.lineJoin = join;
  710.         context.lineWidth = thickness;
  711.         context.strokeStyle = context.createPattern(
  712.             srcLayer.getCanvas(),
  713.             "repeat"
  714.         );
  715.         context.stroke();
  716.         empty = false;
  718.         // Path now implicitly closed
  719.         pathClosed = true;
  721.     };
  723.     /**
  724.      * Fills the current path with the image within the specified layer. The
  725.      * image data will be tiled infinitely within the stroke. The current path
  726.      * is implicitly closed. The current path can continue to be reused
  727.      * for other operations (such as clip()) but a new path will be started
  728.      * once a path drawing operation (path() or rect()) is used.
  729.      * 
  730.      * @param {Guacamole.Layer} srcLayer The layer to use as a repeating pattern
  731.      *                                   within the fill.
  732.      */
  733.     this.fillLayer = function(srcLayer) {
  735.         // Fill with image data 
  736.         context.fillStyle = context.createPattern(
  737.             srcLayer.getCanvas(),
  738.             "repeat"
  739.         );
  740.         context.fill();
  741.         empty = false;
  743.         // Path now implicitly closed
  744.         pathClosed = true;
  746.     };
  748.     /**
  749.      * Push current layer state onto stack.
  750.      */
  751.     this.push = function() {
  753.         // Save current state onto stack
  754.         context.save();
  755.         stackSize++;
  757.     };
  759.     /**
  760.      * Pop layer state off stack.
  761.      */
  762.     this.pop = function() {
  764.         // Restore current state from stack
  765.         if (stackSize > 0) {
  766.             context.restore();
  767.             stackSize--;
  768.         }
  770.     };
  772.     /**
  773.      * Reset the layer, clearing the stack, the current path, and any transform
  774.      * matrix.
  775.      */
  776.     this.reset = function() {
  778.         // Clear stack
  779.         while (stackSize > 0) {
  780.             context.restore();
  781.             stackSize--;
  782.         }
  784.         // Restore to initial state
  785.         context.restore();
  786.         context.save();
  788.         // Clear path
  789.         context.beginPath();
  790.         pathClosed = false;
  792.     };
  794.     /**
  795.      * Sets the given affine transform (defined with six values from the
  796.      * transform's matrix).
  797.      * 
  798.      * @param {Number} a The first value in the affine transform's matrix.
  799.      * @param {Number} b The second value in the affine transform's matrix.
  800.      * @param {Number} c The third value in the affine transform's matrix.
  801.      * @param {Number} d The fourth value in the affine transform's matrix.
  802.      * @param {Number} e The fifth value in the affine transform's matrix.
  803.      * @param {Number} f The sixth value in the affine transform's matrix.
  804.      */
  805.     this.setTransform = function(a, b, c, d, e, f) {
  806.         context.setTransform(
  807.             a, b, c,
  808.             d, e, f
  809.           /*0, 0, 1*/
  810.         );
  811.     };
  813.     /**
  814.      * Applies the given affine transform (defined with six values from the
  815.      * transform's matrix).
  816.      * 
  817.      * @param {Number} a The first value in the affine transform's matrix.
  818.      * @param {Number} b The second value in the affine transform's matrix.
  819.      * @param {Number} c The third value in the affine transform's matrix.
  820.      * @param {Number} d The fourth value in the affine transform's matrix.
  821.      * @param {Number} e The fifth value in the affine transform's matrix.
  822.      * @param {Number} f The sixth value in the affine transform's matrix.
  823.      */
  824.     this.transform = function(a, b, c, d, e, f) {
  825.         context.transform(
  826.             a, b, c,
  827.             d, e, f
  828.           /*0, 0, 1*/
  829.         );
  830.     };
  832.     /**
  833.      * Sets the channel mask for future operations on this Layer.
  834.      * 
  835.      * The channel mask is a Guacamole-specific compositing operation identifier
  836.      * with a single bit representing each of four channels (in order): source
  837.      * image where destination transparent, source where destination opaque,
  838.      * destination where source transparent, and destination where source
  839.      * opaque.
  840.      * 
  841.      * @param {Number} mask The channel mask for future operations on this
  842.      *                      Layer.
  843.      */
  844.     this.setChannelMask = function(mask) {
  845.         context.globalCompositeOperation = compositeOperation[mask];
  846.     };
  848.     /**
  849.      * Sets the miter limit for stroke operations using the miter join. This
  850.      * limit is the maximum ratio of the size of the miter join to the stroke
  851.      * width. If this ratio is exceeded, the miter will not be drawn for that
  852.      * joint of the path.
  853.      * 
  854.      * @param {Number} limit The miter limit for stroke operations using the
  855.      *                       miter join.
  856.      */
  857.     this.setMiterLimit = function(limit) {
  858.         context.miterLimit = limit;
  859.     };
  861.     // Initialize canvas dimensions
  862.     resize(width, height);
  864.     // Explicitly render canvas below other elements in the layer (such as
  865.     // child layers). Chrome and others may fail to render layers properly
  866.     // without this.
  867.     canvas.style.zIndex = -1;
  869. };
  871. /**
  872.  * Channel mask for the composite operation "rout".
  873.  */
  874. Guacamole.Layer.ROUT  = 0x2;
  876. /**
  877.  * Channel mask for the composite operation "atop".
  878.  */
  879. Guacamole.Layer.ATOP  = 0x6;
  881. /**
  882.  * Channel mask for the composite operation "xor".
  883.  */
  884. Guacamole.Layer.XOR   = 0xA;
  886. /**
  887.  * Channel mask for the composite operation "rover".
  888.  */
  889. Guacamole.Layer.ROVER = 0xB;
  891. /**
  892.  * Channel mask for the composite operation "over".
  893.  */
  894. Guacamole.Layer.OVER  = 0xE;
  896. /**
  897.  * Channel mask for the composite operation "plus".
  898.  */
  899. Guacamole.Layer.PLUS  = 0xF;
  901. /**
  902.  * Channel mask for the composite operation "rin".
  903.  * Beware that WebKit-based browsers may leave the contents of the destionation
  904.  * layer where the source layer is transparent, despite the definition of this
  905.  * operation.
  906.  */
  907. Guacamole.Layer.RIN   = 0x1;
  909. /**
  910.  * Channel mask for the composite operation "in".
  911.  * Beware that WebKit-based browsers may leave the contents of the destionation
  912.  * layer where the source layer is transparent, despite the definition of this
  913.  * operation.
  914.  */
  915. Guacamole.Layer.IN    = 0x4;
  917. /**
  918.  * Channel mask for the composite operation "out".
  919.  * Beware that WebKit-based browsers may leave the contents of the destionation
  920.  * layer where the source layer is transparent, despite the definition of this
  921.  * operation.
  922.  */
  923. Guacamole.Layer.OUT   = 0x8;
  925. /**
  926.  * Channel mask for the composite operation "ratop".
  927.  * Beware that WebKit-based browsers may leave the contents of the destionation
  928.  * layer where the source layer is transparent, despite the definition of this
  929.  * operation.
  930.  */
  931. Guacamole.Layer.RATOP = 0x9;
  933. /**
  934.  * Channel mask for the composite operation "src".
  935.  * Beware that WebKit-based browsers may leave the contents of the destionation
  936.  * layer where the source layer is transparent, despite the definition of this
  937.  * operation.
  938.  */
  939. Guacamole.Layer.SRC   = 0xC;
  941. /**
  942.  * Represents a single pixel of image data. All components have a minimum value
  943.  * of 0 and a maximum value of 255.
  944.  * 
  945.  * @constructor
  946.  * 
  947.  * @param {Number} r The red component of this pixel.
  948.  * @param {Number} g The green component of this pixel.
  949.  * @param {Number} b The blue component of this pixel.
  950.  * @param {Number} a The alpha component of this pixel.
  951.  */
  952. Guacamole.Layer.Pixel = function(r, g, b, a) {
  954.     /**
  955.      * The red component of this pixel, where 0 is the minimum value,
  956.      * and 255 is the maximum.
  957.      */
  958.     this.red   = r;
  960.     /**
  961.      * The green component of this pixel, where 0 is the minimum value,
  962.      * and 255 is the maximum.
  963.      */
  964.     this.green = g;
  966.     /**
  967.      * The blue component of this pixel, where 0 is the minimum value,
  968.      * and 255 is the maximum.
  969.      */
  970.     this.blue  = b;
  972.     /**
  973.      * The alpha component of this pixel, where 0 is the minimum value,
  974.      * and 255 is the maximum.
  975.      */
  976.     this.alpha = a;
  978. };