Google Git
Sign in
apache / guacamole-website / c946ef6f398bc0ff7b8da0b5ae7a7f5a55d9c3f6 / . / doc / 1.3.0 / guacamole-common-js / Guacamole.Display.VisibleLayer.html
blob: 75dd80504730ce9210d7b229c40fd929caca811d [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: VisibleLayer</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: VisibleLayer</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>
<span class="ancestors"><a href="Guacamole.html">Guacamole</a><a href="Guacamole.Display.html">.Display</a>.</span>VisibleLayer<span class="signature">(width, height)</span><span class="type-signature"></span></h2>
</header>
<article>
<div class="container-overview">
<h4 class="name" id="VisibleLayer"><span class="type-signature"></span>new VisibleLayer<span class="signature">(width, height)</span><span class="type-signature"></span></h4>
<div class="description">
Simple container for Guacamole.Layer, allowing layers to be easily
repositioned and nested. This allows certain operations to be accelerated
through DOM manipulation, rather than raster operations.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The width of the Layer, in pixels. The canvas element
backing this Layer will be given this width.</td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The height of the Layer, in pixels. The canvas element
backing this Layer will be given this height.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1300">line 1300</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="Guacamole.Layer.html">Guacamole.Layer</a></li>
</ul>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="alpha"><span class="type-signature"></span>alpha<span class="type-signature"></span></h4>
<div class="description">
The opacity of the layer container, where 255 is fully opaque and 0 is
fully transparent.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1324">line 1324</a>
</li></ul></dd>
</dl>
<h4 class="name" id="autosize"><span class="type-signature"></span>autosize<span class="type-signature"> :Boolean</span></h4>
<div class="description">
Set to true if this Layer should resize itself to accomodate the
dimensions of any drawing operation, and false (the default) otherwise.
Note that setting this property takes effect immediately, and thus may
take effect on operations that were started in the past but have not
yet completed. If you wish the setting of this flag to only modify
future operations, you will need to make the setting of this flag an
operation with sync().
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Boolean</span>
</li>
</ul>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#autosize">Guacamole.Layer#autosize</a>
</li></ul></dd>
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy">
<li>false</li>
</ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line255">line 255</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Set autosize to true for all future operations
layer.sync(function() {
layer.autosize = true;
});</code></pre>
<h4 class="name" id="children"><span class="type-signature"></span>children<span class="type-signature"></span></h4>
<div class="description">
Set of all children of this layer, indexed by layer index. This object
will have one property per child.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1366">line 1366</a>
</li></ul></dd>
</dl>
<h4 class="name" id="height"><span class="type-signature"></span>height<span class="type-signature"> :Number</span></h4>
<div class="description">
The current height of this layer.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Number</span>
</li>
</ul>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#height">Guacamole.Layer#height</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line267">line 267</a>
</li></ul></dd>
</dl>
<h4 class="name" id="matrix"><span class="type-signature"></span>matrix<span class="type-signature"> :Array.&lt;Number></span></h4>
<div class="description">
The affine transformation applied to this layer container. Each element
corresponds to a value from the transformation matrix, with the first
three values being the first row, and the last three values being the
second row. There are six values total.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Array.&lt;Number></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1354">line 1354</a>
</li></ul></dd>
</dl>
<h4 class="name" id="parent"><span class="type-signature"></span>parent<span class="type-signature"> :<a href="Guacamole.Display.VisibleLayer.html">Guacamole.Display.VisibleLayer</a></span></h4>
<div class="description">
The parent layer container of this layer, if any.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="Guacamole.Display.VisibleLayer.html">Guacamole.Display.VisibleLayer</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1360">line 1360</a>
</li></ul></dd>
</dl>
<h4 class="name" id="width"><span class="type-signature"></span>width<span class="type-signature"> :Number</span></h4>
<div class="description">
The current width of this layer.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Number</span>
</li>
</ul>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#width">Guacamole.Layer#width</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line261">line 261</a>
</li></ul></dd>
</dl>
<h4 class="name" id="x"><span class="type-signature"></span>x<span class="type-signature"> :Number</span></h4>
<div class="description">
X coordinate of the upper-left corner of this layer container within
its parent, in pixels.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Number</span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1331">line 1331</a>
</li></ul></dd>
</dl>
<h4 class="name" id="y"><span class="type-signature"></span>y<span class="type-signature"> :Number</span></h4>
<div class="description">
Y coordinate of the upper-left corner of this layer container within
its parent, in pixels.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Number</span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1338">line 1338</a>
</li></ul></dd>
</dl>
<h4 class="name" id="z"><span class="type-signature"></span>z<span class="type-signature"> :Number</span></h4>
<div class="description">
Z stacking order of this layer relative to other sibling layers.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Number</span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1344">line 1344</a>
</li></ul></dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="arc"><span class="type-signature"></span>arc<span class="signature">(x, y, radius, startAngle, endAngle, negative)</span><span class="type-signature"></span></h4>
<div class="description">
Add the specified arc to the current path.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate of the center of the circle which
will contain the arc.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate of the center of the circle which
will contain the arc.</td>
</tr>
<tr>
<td class="name"><code>radius</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The radius of the circle.</td>
</tr>
<tr>
<td class="name"><code>startAngle</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The starting angle of the arc, in radians.</td>
</tr>
<tr>
<td class="name"><code>endAngle</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The ending angle of the arc, in radians.</td>
</tr>
<tr>
<td class="name"><code>negative</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">Whether the arc should be drawn in order of
decreasing angle.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#arc">Guacamole.Layer#arc</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line556">line 556</a>
</li></ul></dd>
</dl>
<h4 class="name" id="clip"><span class="type-signature"></span>clip<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Clip all future drawing operations by the current path. The current path
is implicitly closed. The current path can continue to be reused
for other operations (such as fillColor()) but a new path will be started
once a path drawing operation (path() or rect()) is used.
</div>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#clip">Guacamole.Layer#clip</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line630">line 630</a>
</li></ul></dd>
</dl>
<h4 class="name" id="close"><span class="type-signature"></span>close<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Closes the current path by connecting the end point with the start
point (if any) with a straight line.
</div>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#close">Guacamole.Layer#close</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line596">line 596</a>
</li></ul></dd>
</dl>
<h4 class="name" id="copy"><span class="type-signature"></span>copy<span class="signature">(srcLayer, srcx, srcy, srcw, srch, x, y)</span><span class="type-signature"></span></h4>
<div class="description">
Copy a rectangle of image data from one Layer to this Layer. This
operation will copy exactly the image data that will be drawn once all
operations of the source Layer that were pending at the time this
function was called are complete. This operation will not alter the
size of the source Layer even if its autosize property is set to true.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>srcLayer</code></td>
<td class="type">
<span class="param-type"><a href="Guacamole.Layer.html">Guacamole.Layer</a></span>
</td>
<td class="description last">The Layer to copy image data from.</td>
</tr>
<tr>
<td class="name"><code>srcx</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate of the upper-left corner of the
rectangle within the source Layer's coordinate
space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>srcy</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate of the upper-left corner of the
rectangle within the source Layer's coordinate
space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>srcw</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The width of the rectangle within the source Layer's
coordinate space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>srch</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The height of the rectangle within the source
Layer's coordinate space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The destination X coordinate.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The destination Y coordinate.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#copy">Guacamole.Layer#copy</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line482">line 482</a>
</li></ul></dd>
</dl>
<h4 class="name" id="curveTo"><span class="type-signature"></span>curveTo<span class="signature">(cp1x, cp1y, cp2x, cp2y, x, y)</span><span class="type-signature"></span></h4>
<div class="description">
Starts a new path at the specified point.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>cp1x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate of the first control point.</td>
</tr>
<tr>
<td class="name"><code>cp1y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate of the first control point.</td>
</tr>
<tr>
<td class="name"><code>cp2x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate of the second control point.</td>
</tr>
<tr>
<td class="name"><code>cp2y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate of the second control point.</td>
</tr>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate of the endpoint of the curve.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate of the endpoint of the curve.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#curveTo">Guacamole.Layer#curveTo</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line579">line 579</a>
</li></ul></dd>
</dl>
<h4 class="name" id="dispose"><span class="type-signature"></span>dispose<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Removes this layer container entirely, such that it is no longer
contained within its parent layer, if any.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1498">line 1498</a>
</li></ul></dd>
</dl>
<h4 class="name" id="distort"><span class="type-signature"></span>distort<span class="signature">(a, b, c, d, e, f)</span><span class="type-signature"></span></h4>
<div class="description">
Applies the given affine transform (defined with six values from the
transform's matrix).
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>a</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The first value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The second value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>c</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The third value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>d</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The fourth value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The fifth value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>f</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The sixth value in the affine transform's matrix.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1523">line 1523</a>
</li></ul></dd>
</dl>
<h4 class="name" id="drawImage"><span class="type-signature"></span>drawImage<span class="signature">(x, y, image)</span><span class="type-signature"></span></h4>
<div class="description">
Draws the specified image at the given coordinates. The image specified
must already be loaded.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The destination X coordinate.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The destination Y coordinate.</td>
</tr>
<tr>
<td class="name"><code>image</code></td>
<td class="type">
<span class="param-type">CanvasImageSource</span>
</td>
<td class="description last">The image to draw. Note that this is not a URL.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#drawImage">Guacamole.Layer#drawImage</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line331">line 331</a>
</li></ul></dd>
</dl>
<h4 class="name" id="fillColor"><span class="type-signature"></span>fillColor<span class="signature">(r, g, b, a)</span><span class="type-signature"></span></h4>
<div class="description">
Fills the current path with the specified color. The current path
is implicitly closed. The current path can continue to be reused
for other operations (such as clip()) but a new path will be started
once a path drawing operation (path() or rect()) is used.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>r</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The red component of the color to fill.</td>
</tr>
<tr>
<td class="name"><code>g</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The green component of the color to fill.</td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The blue component of the color to fill.</td>
</tr>
<tr>
<td class="name"><code>a</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The alpha component of the color to fill.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#fillColor">Guacamole.Layer#fillColor</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line682">line 682</a>
</li></ul></dd>
</dl>
<h4 class="name" id="fillLayer"><span class="type-signature"></span>fillLayer<span class="signature">(srcLayer)</span><span class="type-signature"></span></h4>
<div class="description">
Fills the current path with the image within the specified layer. The
image data will be tiled infinitely within the stroke. The current path
is implicitly closed. The current path can continue to be reused
for other operations (such as clip()) but a new path will be started
once a path drawing operation (path() or rect()) is used.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>srcLayer</code></td>
<td class="type">
<span class="param-type"><a href="Guacamole.Layer.html">Guacamole.Layer</a></span>
</td>
<td class="description last">The layer to use as a repeating pattern
within the fill.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#fillLayer">Guacamole.Layer#fillLayer</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line737">line 737</a>
</li></ul></dd>
</dl>
<h4 class="name" id="getCanvas"><span class="type-signature"></span>getCanvas<span class="signature">()</span><span class="type-signature"> &rarr; {HTMLCanvasElement}</span></h4>
<div class="description">
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.
</div>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#getCanvas">Guacamole.Layer#getCanvas</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line277">line 277</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The canvas element backing this Layer.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">HTMLCanvasElement</span>
</dd>
</dl>
<h4 class="name" id="getElement"><span class="type-signature"></span>getElement<span class="signature">()</span><span class="type-signature"> &rarr; {Element}</span></h4>
<div class="description">
Returns the element containing the canvas and any other elements
associated with this layer.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1405">line 1405</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The element containing this layer's canvas.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Element</span>
</dd>
</dl>
<h4 class="name" id="lineTo"><span class="type-signature"></span>lineTo<span class="signature">(x, y)</span><span class="type-signature"></span></h4>
<div class="description">
Add the specified line to the current path.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate of the endpoint of the line to draw.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate of the endpoint of the line to draw.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#lineTo">Guacamole.Layer#lineTo</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line530">line 530</a>
</li></ul></dd>
</dl>
<h4 class="name" id="move"><span class="type-signature"></span>move<span class="signature">(parent, x, y, z)</span><span class="type-signature"></span></h4>
<div class="description">
Moves the upper-left corner of this VisibleLayer to the given X and Y
coordinate, sets the Z stacking order, and reparents this VisibleLayer
to the given VisibleLayer.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>parent</code></td>
<td class="type">
<span class="param-type"><a href="Guacamole.Display.VisibleLayer.html">Guacamole.Display.VisibleLayer</a></span>
</td>
<td class="description last">The parent to set.</td>
</tr>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate to move to.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate to move to.</td>
</tr>
<tr>
<td class="name"><code>z</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Z coordinate to move to.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1459">line 1459</a>
</li></ul></dd>
</dl>
<h4 class="name" id="moveTo"><span class="type-signature"></span>moveTo<span class="signature">(x, y)</span><span class="type-signature"></span></h4>
<div class="description">
Starts a new path at the specified point.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate of the point to draw.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate of the point to draw.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#moveTo">Guacamole.Layer#moveTo</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line511">line 511</a>
</li></ul></dd>
</dl>
<h4 class="name" id="pop"><span class="type-signature"></span>pop<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Pop layer state off stack.
</div>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#pop">Guacamole.Layer#pop</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line766">line 766</a>
</li></ul></dd>
</dl>
<h4 class="name" id="push"><span class="type-signature"></span>push<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Push current layer state onto stack.
</div>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#push">Guacamole.Layer#push</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line755">line 755</a>
</li></ul></dd>
</dl>
<h4 class="name" id="put"><span class="type-signature"></span>put<span class="signature">(srcLayer, srcx, srcy, srcw, srch, x, y)</span><span class="type-signature"></span></h4>
<div class="description">
Put a rectangle of image data from one Layer to this Layer directly
without performing any alpha blending. Simply copy the data.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>srcLayer</code></td>
<td class="type">
<span class="param-type"><a href="Guacamole.Layer.html">Guacamole.Layer</a></span>
</td>
<td class="description last">The Layer to copy image data from.</td>
</tr>
<tr>
<td class="name"><code>srcx</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate of the upper-left corner of the
rectangle within the source Layer's coordinate
space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>srcy</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate of the upper-left corner of the
rectangle within the source Layer's coordinate
space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>srcw</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The width of the rectangle within the source Layer's
coordinate space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>srch</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The height of the rectangle within the source
Layer's coordinate space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The destination X coordinate.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The destination Y coordinate.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#put">Guacamole.Layer#put</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line435">line 435</a>
</li></ul></dd>
</dl>
<h4 class="name" id="rect"><span class="type-signature"></span>rect<span class="signature">(x, y, w, h)</span><span class="type-signature"></span></h4>
<div class="description">
Add the specified rectangle to the current path.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate of the upper-left corner of the
rectangle to draw.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate of the upper-left corner of the
rectangle to draw.</td>
</tr>
<tr>
<td class="name"><code>w</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The width of the rectangle to draw.</td>
</tr>
<tr>
<td class="name"><code>h</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The height of the rectangle to draw.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#rect">Guacamole.Layer#rect</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line611">line 611</a>
</li></ul></dd>
</dl>
<h4 class="name" id="reset"><span class="type-signature"></span>reset<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Reset the layer, clearing the stack, the current path, and any transform
matrix.
</div>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#reset">Guacamole.Layer#reset</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line780">line 780</a>
</li></ul></dd>
</dl>
<h4 class="name" id="resize"><span class="type-signature"></span>resize<span class="signature">(newWidth, newHeight)</span><span class="type-signature"></span></h4>
<div class="description">
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
the current size.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>newWidth</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The new width to assign to this Layer.</td>
</tr>
<tr>
<td class="name"><code>newHeight</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The new height to assign to this Layer.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-overrides">Overrides:</dt>
<dd class="tag-overrides"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#resize">Guacamole.Layer#resize</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line313">line 313</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setChannelMask"><span class="type-signature"></span>setChannelMask<span class="signature">(mask)</span><span class="type-signature"></span></h4>
<div class="description">
Sets the channel mask for future operations on this Layer.
The channel mask is a Guacamole-specific compositing operation identifier
with a single bit representing each of four channels (in order): source
image where destination transparent, source where destination opaque,
destination where source transparent, and destination where source
opaque.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>mask</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The channel mask for future operations on this
Layer.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#setChannelMask">Guacamole.Layer#setChannelMask</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line848">line 848</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setMiterLimit"><span class="type-signature"></span>setMiterLimit<span class="signature">(limit)</span><span class="type-signature"></span></h4>
<div class="description">
Sets the miter limit for stroke operations using the miter join. This
limit is the maximum ratio of the size of the miter join to the stroke
width. If this ratio is exceeded, the miter will not be drawn for that
joint of the path.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>limit</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The miter limit for stroke operations using the
miter join.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#setMiterLimit">Guacamole.Layer#setMiterLimit</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line861">line 861</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setTransform"><span class="type-signature"></span>setTransform<span class="signature">(a, b, c, d, e, f)</span><span class="type-signature"></span></h4>
<div class="description">
Sets the given affine transform (defined with six values from the
transform's matrix).
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>a</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The first value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The second value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>c</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The third value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>d</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The fourth value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The fifth value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>f</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The sixth value in the affine transform's matrix.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#setTransform">Guacamole.Layer#setTransform</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line809">line 809</a>
</li></ul></dd>
</dl>
<h4 class="name" id="shade"><span class="type-signature"></span>shade<span class="signature">(a)</span><span class="type-signature"></span></h4>
<div class="description">
Sets the opacity of this layer to the given value, where 255 is fully
opaque and 0 is fully transparent.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>a</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The opacity to set.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1489">line 1489</a>
</li></ul></dd>
</dl>
<h4 class="name" id="strokeColor"><span class="type-signature"></span>strokeColor<span class="signature">(cap, join, thickness, r, g, b, a)</span><span class="type-signature"></span></h4>
<div class="description">
Stroke the current path with the specified color. The current path
is implicitly closed. The current path can continue to be reused
for other operations (such as clip()) but a new path will be started
once a path drawing operation (path() or rect()) is used.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>cap</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">The line cap style. Can be "round", "square",
or "butt".</td>
</tr>
<tr>
<td class="name"><code>join</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">The line join style. Can be "round", "bevel",
or "miter".</td>
</tr>
<tr>
<td class="name"><code>thickness</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The line thickness in pixels.</td>
</tr>
<tr>
<td class="name"><code>r</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The red component of the color to fill.</td>
</tr>
<tr>
<td class="name"><code>g</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The green component of the color to fill.</td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The blue component of the color to fill.</td>
</tr>
<tr>
<td class="name"><code>a</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The alpha component of the color to fill.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#strokeColor">Guacamole.Layer#strokeColor</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line656">line 656</a>
</li></ul></dd>
</dl>
<h4 class="name" id="strokeLayer"><span class="type-signature"></span>strokeLayer<span class="signature">(cap, join, thickness, srcLayer)</span><span class="type-signature"></span></h4>
<div class="description">
Stroke the current path with the image within the specified layer. The
image data will be tiled infinitely within the stroke. The current path
is implicitly closed. The current path can continue to be reused
for other operations (such as clip()) but a new path will be started
once a path drawing operation (path() or rect()) is used.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>cap</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">The line cap style. Can be "round", "square",
or "butt".</td>
</tr>
<tr>
<td class="name"><code>join</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">The line join style. Can be "round", "bevel",
or "miter".</td>
</tr>
<tr>
<td class="name"><code>thickness</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The line thickness in pixels.</td>
</tr>
<tr>
<td class="name"><code>srcLayer</code></td>
<td class="type">
<span class="param-type"><a href="Guacamole.Layer.html">Guacamole.Layer</a></span>
</td>
<td class="description last">The layer to use as a repeating pattern
within the stroke.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#strokeLayer">Guacamole.Layer#strokeLayer</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line709">line 709</a>
</li></ul></dd>
</dl>
<h4 class="name" id="toCanvas"><span class="type-signature"></span>toCanvas<span class="signature">()</span><span class="type-signature"> &rarr; {HTMLCanvasElement}</span></h4>
<div class="description">
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.
</div>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#toCanvas">Guacamole.Layer#toCanvas</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line290">line 290</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A new canvas element containing a copy of the image content this
Layer.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">HTMLCanvasElement</span>
</dd>
</dl>
<h4 class="name" id="transfer"><span class="type-signature"></span>transfer<span class="signature">(srcLayer, srcx, srcy, srcw, srch, x, y, transferFunction)</span><span class="type-signature"></span></h4>
<div class="description">
Transfer a rectangle of image data from one Layer to this Layer using the
specified transfer function.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>srcLayer</code></td>
<td class="type">
<span class="param-type"><a href="Guacamole.Layer.html">Guacamole.Layer</a></span>
</td>
<td class="description last">The Layer to copy image data from.</td>
</tr>
<tr>
<td class="name"><code>srcx</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate of the upper-left corner of the
rectangle within the source Layer's coordinate
space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>srcy</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate of the upper-left corner of the
rectangle within the source Layer's coordinate
space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>srcw</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The width of the rectangle within the source Layer's
coordinate space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>srch</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The height of the rectangle within the source
Layer's coordinate space to copy data from.</td>
</tr>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The destination X coordinate.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The destination Y coordinate.</td>
</tr>
<tr>
<td class="name"><code>transferFunction</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">The transfer function to use to
transfer data from source to
destination.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#transfer">Guacamole.Layer#transfer</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line358">line 358</a>
</li></ul></dd>
</dl>
<h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(a, b, c, d, e, f)</span><span class="type-signature"></span></h4>
<div class="description">
Applies the given affine transform (defined with six values from the
transform's matrix).
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>a</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The first value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The second value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>c</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The third value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>d</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The fourth value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The fifth value in the affine transform's matrix.</td>
</tr>
<tr>
<td class="name"><code>f</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The sixth value in the affine transform's matrix.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="Guacamole.Layer.html#transform">Guacamole.Layer#transform</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line828">line 828</a>
</li></ul></dd>
</dl>
<h4 class="name" id="translate"><span class="type-signature"></span>translate<span class="signature">(x, y)</span><span class="type-signature"></span></h4>
<div class="description">
Moves the upper-left corner of this layer to the given X and Y
coordinate.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The X coordinate to move to.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The Y coordinate to move to.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1428">line 1428</a>
</li></ul></dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="Guacamole.html">Guacamole</a></li><li><a href="Guacamole.AudioContextFactory.html">AudioContextFactory</a></li></ul><h3>Classes</h3><ul><li><a href="Guacamole.ArrayBufferReader.html">ArrayBufferReader</a></li><li><a href="Guacamole.ArrayBufferWriter.html">ArrayBufferWriter</a></li><li><a href="Guacamole.AudioPlayer.html">AudioPlayer</a></li><li><a href="Guacamole.AudioRecorder.html">AudioRecorder</a></li><li><a href="Guacamole.BlobReader.html">BlobReader</a></li><li><a href="Guacamole.BlobWriter.html">BlobWriter</a></li><li><a href="Guacamole.ChainedTunnel.html">ChainedTunnel</a></li><li><a href="Guacamole.Client.html">Client</a></li><li><a href="Guacamole.DataURIReader.html">DataURIReader</a></li><li><a href="Guacamole.Display.html">Display</a></li><li><a href="Guacamole.Display.VisibleLayer.html">VisibleLayer</a></li><li><a href="Guacamole.HTTPTunnel.html">HTTPTunnel</a></li><li><a href="Guacamole.InputSink.html">InputSink</a></li><li><a href="Guacamole.InputStream.html">InputStream</a></li><li><a href="Guacamole.IntegerPool.html">IntegerPool</a></li><li><a href="Guacamole.JSONReader.html">JSONReader</a></li><li><a href="Guacamole.Keyboard.html">Keyboard</a></li><li><a href="Guacamole.Keyboard.ModifierState.html">ModifierState</a></li><li><a href="Guacamole.Layer.html">Layer</a></li><li><a href="Guacamole.Layer.Pixel.html">Pixel</a></li><li><a href="Guacamole.Mouse.html">Mouse</a></li><li><a href="Guacamole.Mouse.State.html">State</a></li><li><a href="Guacamole.Mouse.Touchpad.html">Touchpad</a></li><li><a href="Guacamole.Mouse.Touchscreen.html">Touchscreen</a></li><li><a href="Guacamole.Object.html">Object</a></li><li><a href="Guacamole.OnScreenKeyboard.html">OnScreenKeyboard</a></li><li><a href="Guacamole.OnScreenKeyboard.Key.html">Key</a></li><li><a href="Guacamole.OnScreenKeyboard.Layout.html">Layout</a></li><li><a href="Guacamole.OutputStream.html">OutputStream</a></li><li><a href="Guacamole.Parser.html">Parser</a></li><li><a href="Guacamole.RawAudioFormat.html">RawAudioFormat</a></li><li><a href="Guacamole.RawAudioPlayer.html">RawAudioPlayer</a></li><li><a href="Guacamole.RawAudioRecorder.html">RawAudioRecorder</a></li><li><a href="Guacamole.SessionRecording.html">SessionRecording</a></li><li><a href="Guacamole.StaticHTTPTunnel.html">StaticHTTPTunnel</a></li><li><a href="Guacamole.Status.html">Status</a></li><li><a href="Guacamole.StringReader.html">StringReader</a></li><li><a href="Guacamole.StringWriter.html">StringWriter</a></li><li><a href="Guacamole.Tunnel.html">Tunnel</a></li><li><a href="Guacamole.VideoPlayer.html">VideoPlayer</a></li><li><a href="Guacamole.WebSocketTunnel.html">WebSocketTunnel</a></li></ul><h3>Events</h3><ul><li><a href="Guacamole.ArrayBufferReader.html#event:ondata">ondata</a></li><li><a href="Guacamole.ArrayBufferReader.html#event:onend">onend</a></li><li><a href="Guacamole.ArrayBufferWriter.html#event:onack">onack</a></li><li><a href="Guacamole.AudioRecorder.html#event:onclose">onclose</a></li><li><a href="Guacamole.AudioRecorder.html#event:onerror">onerror</a></li><li><a href="Guacamole.BlobReader.html#event:onend">onend</a></li><li><a href="Guacamole.BlobReader.html#event:onprogress">onprogress</a></li><li><a href="Guacamole.BlobWriter.html#event:onack">onack</a></li><li><a href="Guacamole.BlobWriter.html#event:oncomplete">oncomplete</a></li><li><a href="Guacamole.BlobWriter.html#event:onerror">onerror</a></li><li><a href="Guacamole.BlobWriter.html#event:onprogress">onprogress</a></li><li><a href="Guacamole.ChainedTunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.ChainedTunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.ChainedTunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.ChainedTunnel.html#event:onuuid">onuuid</a></li><li><a href="Guacamole.Client.html#event:onargv">onargv</a></li><li><a href="Guacamole.Client.html#event:onaudio">onaudio</a></li><li><a href="Guacamole.Client.html#event:onclipboard">onclipboard</a></li><li><a href="Guacamole.Client.html#event:onerror">onerror</a></li><li><a href="Guacamole.Client.html#event:onfile">onfile</a></li><li><a href="Guacamole.Client.html#event:onfilesystem">onfilesystem</a></li><li><a href="Guacamole.Client.html#event:onname">onname</a></li><li><a href="Guacamole.Client.html#event:onpipe">onpipe</a></li><li><a href="Guacamole.Client.html#event:onrequired">onrequired</a></li><li><a href="Guacamole.Client.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.Client.html#event:onsync">onsync</a></li><li><a href="Guacamole.Client.html#event:onvideo">onvideo</a></li><li><a href="Guacamole.DataURIReader.html#event:onend">onend</a></li><li><a href="Guacamole.Display.html#event:oncursor">oncursor</a></li><li><a href="Guacamole.Display.html#event:onresize">onresize</a></li><li><a href="Guacamole.HTTPTunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.HTTPTunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.HTTPTunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.HTTPTunnel.html#event:onuuid">onuuid</a></li><li><a href="Guacamole.InputStream.html#event:onblob">onblob</a></li><li><a href="Guacamole.InputStream.html#event:onend">onend</a></li><li><a href="Guacamole.JSONReader.html#event:onend">onend</a></li><li><a href="Guacamole.JSONReader.html#event:onprogress">onprogress</a></li><li><a href="Guacamole.Keyboard.html#event:onkeydown">onkeydown</a></li><li><a href="Guacamole.Keyboard.html#event:onkeyup">onkeyup</a></li><li><a href="Guacamole.Mouse.Touchpad.html#event:onmousedown">onmousedown</a></li><li><a href="Guacamole.Mouse.Touchpad.html#event:onmousemove">onmousemove</a></li><li><a href="Guacamole.Mouse.Touchpad.html#event:onmouseup">onmouseup</a></li><li><a href="Guacamole.Mouse.Touchscreen.html#event:onmousedown">onmousedown</a></li><li><a href="Guacamole.Mouse.Touchscreen.html#event:onmousemove">onmousemove</a></li><li><a href="Guacamole.Mouse.Touchscreen.html#event:onmouseup">onmouseup</a></li><li><a href="Guacamole.Mouse.html#event:onmousedown">onmousedown</a></li><li><a href="Guacamole.Mouse.html#event:onmousemove">onmousemove</a></li><li><a href="Guacamole.Mouse.html#event:onmouseout">onmouseout</a></li><li><a href="Guacamole.Mouse.html#event:onmouseup">onmouseup</a></li><li><a href="Guacamole.Object.html#event:onbody">onbody</a></li><li><a href="Guacamole.Object.html#event:onundefine">onundefine</a></li><li><a href="Guacamole.OnScreenKeyboard.html#event:onkeydown">onkeydown</a></li><li><a href="Guacamole.OnScreenKeyboard.html#event:onkeyup">onkeyup</a></li><li><a href="Guacamole.OutputStream.html#event:onack">onack</a></li><li><a href="Guacamole.Parser.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.RawAudioRecorder.html#event:onclose">onclose</a></li><li><a href="Guacamole.RawAudioRecorder.html#event:onerror">onerror</a></li><li><a href="Guacamole.SessionRecording._PlaybackTunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.SessionRecording._PlaybackTunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.SessionRecording._PlaybackTunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.SessionRecording._PlaybackTunnel.html#event:onuuid">onuuid</a></li><li><a href="Guacamole.SessionRecording.html#event:onpause">onpause</a></li><li><a href="Guacamole.SessionRecording.html#event:onplay">onplay</a></li><li><a href="Guacamole.SessionRecording.html#event:onprogress">onprogress</a></li><li><a href="Guacamole.SessionRecording.html#event:onseek">onseek</a></li><li><a href="Guacamole.StaticHTTPTunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.StaticHTTPTunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.StaticHTTPTunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.StaticHTTPTunnel.html#event:onuuid">onuuid</a></li><li><a href="Guacamole.StringReader.html#event:onend">onend</a></li><li><a href="Guacamole.StringReader.html#event:ontext">ontext</a></li><li><a href="Guacamole.StringWriter.html#event:onack">onack</a></li><li><a href="Guacamole.Tunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.Tunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.Tunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.Tunnel.html#event:onuuid">onuuid</a></li><li><a href="Guacamole.WebSocketTunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.WebSocketTunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.WebSocketTunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.WebSocketTunnel.html#event:onuuid">onuuid</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.6</a> on Mon Dec 21 2020 15:19:53 GMT-0800 (Pacific Standard Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-75289145-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>