<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns:yui="http://yuilibrary.com/rdf/1.0/yui.rdf#">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>API: WireIt WireIt.CanvasElement (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="assets/reset-fonts-grids-min.css" />
<link rel="stylesheet" type="text/css" href="assets/api.css" />
<script type="text/javascript" src="assets/api-js"></script>
<script type="text/javascript" src="assets/ac-js"></script>
</head>
<body id="yahoo-com">
<div id="doc3" class="yui-t2">
<div id="hd">
<h1><a href="http://neyric.github.com/wireit" title="WireItLibrary">WireItLibrary</a></h1>
<h3>WireIt <span class="subtitle">0.6.0</span></h3>
<a href="./index.html" title="WireItLibrary">WireItLibrary</a>
> <a href="./module_wireit.html" title="WireIt">WireIt</a>
> WireIt.CanvasElement
<form onsubmit="return false">
<div id="propertysearch">
Search: <input autocomplete="off" id="searchinput" />
<div id="searchresults">
</div>
</div>
</form>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form action="#" name="yui-classopts-form" method="get" id="yui-classopts-form">
<fieldset>
<legend>Filters</legend>
<span class="classopts"><input type="checkbox" name="show_private" id="show_private" /> <label for="show_private">Show Private</label></span>
<span class="classopts"><input type="checkbox" name="show_protected" id="show_protected" /> <label for="show_protected">Show Protected</label></span>
<span class="classopts"><input type="checkbox" name="show_deprecated" id="show_deprecated" /> <label for="show_deprecated">Show Deprecated</label></span>
</fieldset>
</form>
<h2>
Class <b property="yui:name">WireIt.CanvasElement</b>
<span class="extends">
</span>
</h2>
<!-- class tree goes here -->
<dl class="subclasses" rel="yui:subclasses">
<dt>Known Subclasses:</dt>
<dd>
<span rel="yui:subclass" resource="WireIt.Wire.html">
<a href="WireIt.Wire.html" property="yui:name" title="WireIt.Wire">WireIt.Wire</a>
</span>
<span rel="yui:subclass" resource="WireIt.RubberBand.html">
<a href="WireIt.RubberBand.html" property="yui:name" title="WireIt.RubberBand">WireIt.RubberBand</a>
</span>
<span rel="yui:subclass" resource="WireIt.LayerMap.html">
<a href="WireIt.LayerMap.html" property="yui:name" title="WireIt.LayerMap">WireIt.LayerMap</a>
</span>
</dd>
</dl>
<div class="summary description" property="yui:description">
Create a canvas element and wrap cross-browser hacks to resize it
</div>
<div class="section constructor details" rel="yui:constructor" resource="#constructor">
<h3 id="constructor">Constructor</h3>
<div class="content">
<div class="detail">
<strong property="yui:name">WireIt.CanvasElement</strong>
<code>
(
parentNode
)
</code>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">parentNode</span>
<<span property="yui:type">HTMLElement</span>>
</code>
<span property="yui:description"> The canvas tag will be append to this parent DOM node.</span>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div rel="yui:properties" resource="#properties">
<div class="section field details">
<h3 id="properties">Properties</h3>
<div class="content">
<div class="" rel="yui:property" resource="#property_element">
<h4><a name="property_element" property="yui:name">element</a>
- <code><span property="yui:type">HTMLElement</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
The canvas element
</div>
</div>
<hr />
</div>
</div>
</div>
</div>
<div rel="yui:methods" resource="#methods">
<div class="section method details">
<h3 id="methods">Methods</h3>
<div class="content">
<div class="" rel="yui:method" resource="#method_destroy">
<h4>
<a name="method_destroy">destroy</a></h4>
<div class="detail" >
<code>
void
<strong property="yui:name">destroy</strong>
(
)
</code>
<div class="description" property="yui:description">
Purge all event listeners and remove the component from the dom
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_getContext">
<h4>
<a name="method_getContext">getContext</a></h4>
<div class="detail" >
<code>
CanvasContext
<strong property="yui:name">getContext</strong>
(
[mode]
)
</code>
<div class="description" property="yui:description">
Get a drawing context
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">[mode]</span>
<<span property="yui:type">String</span>>
</code>
<span property="yui:description"> Context mode (default "2d")</span>
</dd>
</dl>
<dl>
<dt>Returns:
<code property="yui:return">
CanvasContext
</code></dt>
<dd property="yui:returnInfo">the context</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_SetCanvasRegion">
<h4>
<a name="method_SetCanvasRegion">SetCanvasRegion</a></h4>
<div class="detail" >
<code>
void
<strong property="yui:name">SetCanvasRegion</strong>
(
left
,
top
,
width
,
height
)
</code>
<div class="description" property="yui:description">
Set the canvas position and size.
<b>Warning:</b> This method changes the <i>element</i> property under some brother. Don't copy references !
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">left</span>
<<span property="yui:type">Number</span>>
</code>
<span property="yui:description"> Left position</span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">top</span>
<<span property="yui:type">Number</span>>
</code>
<span property="yui:description"> Top position</span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">width</span>
<<span property="yui:type">Number</span>>
</code>
<span property="yui:description"> New width</span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">height</span>
<<span property="yui:type">Number</span>>
</code>
<span property="yui:description"> New height</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
</div>
<div rel="yui:events" resource="#events">
</div>
<div rel="yui:attributes" resource="#configattributes">
</div>
</div>
</div>
<div class="yui-b">
<div class="nav">
<div id="moduleList" class="module">
<h4>Modules</h4>
<ul class="content">
<li class=""><a href="module_animations-plugin.html" title="animations-plugin">animations-plugin</a></li>
<li class=""><a href="module_composable-plugin.html" title="composable-plugin">composable-plugin</a></li>
<li class=""><a href="module_editor-plugin.html" title="editor-plugin">editor-plugin</a></li>
<li class=""><a href="module_inputex-plugin.html" title="inputex-plugin">inputex-plugin</a></li>
<li class=""><a href="module_layout-plugin.html" title="layout-plugin">layout-plugin</a></li>
<li class="selected"><a href="module_wireit.html" title="WireIt">WireIt</a></li>
</ul>
</div>
<div id="classList" class="module">
<h4>Classes</h4>
<ul class="content">
<li class=""><a href="WireIt.ArrowWire.html" title="WireIt.ArrowWire">WireIt.ArrowWire</a></li>
<li class=""><a href="WireIt.BezierArrowWire.html" title="WireIt.BezierArrowWire">WireIt.BezierArrowWire</a></li>
<li class=""><a href="WireIt.BezierWire.html" title="WireIt.BezierWire">WireIt.BezierWire</a></li>
<li class=""><a href="WireIt.CanvasContainer.html" title="WireIt.CanvasContainer">WireIt.CanvasContainer</a></li>
<li class="selected"><a href="WireIt.CanvasElement.html" title="WireIt.CanvasElement">WireIt.CanvasElement</a></li>
<li class=""><a href="WireIt.Container.html" title="WireIt.Container">WireIt.Container</a></li>
<li class=""><a href="WireIt.Layer.html" title="WireIt.Layer">WireIt.Layer</a></li>
<li class=""><a href="WireIt.LayerMap.html" title="WireIt.LayerMap">WireIt.LayerMap</a></li>
<li class=""><a href="WireIt.LeftSquareArrow.html" title="WireIt.LeftSquareArrow">WireIt.LeftSquareArrow</a></li>
<li class=""><a href="WireIt.RectLabelContainer.html" title="WireIt.RectLabelContainer">WireIt.RectLabelContainer</a></li>
<li class=""><a href="WireIt.RightSquareArrow.html" title="WireIt.RightSquareArrow">WireIt.RightSquareArrow</a></li>
<li class=""><a href="WireIt.Scissors.html" title="WireIt.Scissors">WireIt.Scissors</a></li>
<li class=""><a href="WireIt.StepWire.html" title="WireIt.StepWire">WireIt.StepWire</a></li>
<li class=""><a href="WireIt.Terminal.html" title="WireIt.Terminal">WireIt.Terminal</a></li>
<li class=""><a href="WireIt.TerminalProxy.html" title="WireIt.TerminalProxy">WireIt.TerminalProxy</a></li>
<li class=""><a href="WireIt.util.DD.html" title="WireIt.util.DD">WireIt.util.DD</a></li>
<li class=""><a href="WireIt.util.DDResize.html" title="WireIt.util.DDResize">WireIt.util.DDResize</a></li>
<li class=""><a href="WireIt.util.EllipseLabelContainer.html" title="WireIt.util.EllipseLabelContainer">WireIt.util.EllipseLabelContainer</a></li>
<li class=""><a href="WireIt.util.ImageContainer.html" title="WireIt.util.ImageContainer">WireIt.util.ImageContainer</a></li>
<li class=""><a href="WireIt.util.InOutContainer.html" title="WireIt.util.InOutContainer">WireIt.util.InOutContainer</a></li>
<li class=""><a href="WireIt.util.TerminalInput.html" title="WireIt.util.TerminalInput">WireIt.util.TerminalInput</a></li>
<li class=""><a href="WireIt.util.TerminalOutput.html" title="WireIt.util.TerminalOutput">WireIt.util.TerminalOutput</a></li>
<li class=""><a href="WireIt.Wire.html" title="WireIt.Wire">WireIt.Wire</a></li>
<li class=""><a href="WireIt.WireIt.html" title="WireIt.WireIt">WireIt.WireIt</a></li>
</ul>
</div>
<div id="fileList" class="module">
<h4>Files</h4>
<ul class="content">
<li class=""><a href="ArrowWire.js.html" title="ArrowWire.js">ArrowWire.js</a></li>
<li class=""><a href="BezierArrowWire.js.html" title="BezierArrowWire.js">BezierArrowWire.js</a></li>
<li class=""><a href="BezierWire.js.html" title="BezierWire.js">BezierWire.js</a></li>
<li class=""><a href="CanvasContainer.js.html" title="CanvasContainer.js">CanvasContainer.js</a></li>
<li class=""><a href="CanvasElement.js.html" title="CanvasElement.js">CanvasElement.js</a></li>
<li class=""><a href="Container.js.html" title="Container.js">Container.js</a></li>
<li class=""><a href="DD.js.html" title="DD.js">DD.js</a></li>
<li class=""><a href="DDResize.js.html" title="DDResize.js">DDResize.js</a></li>
<li class=""><a href="EllipseLabelContainer.js.html" title="EllipseLabelContainer.js">EllipseLabelContainer.js</a></li>
<li class=""><a href="ImageContainer.js.html" title="ImageContainer.js">ImageContainer.js</a></li>
<li class=""><a href="InOutContainer.js.html" title="InOutContainer.js">InOutContainer.js</a></li>
<li class=""><a href="Layer.js.html" title="Layer.js">Layer.js</a></li>
<li class=""><a href="LayerMap.js.html" title="LayerMap.js">LayerMap.js</a></li>
<li class=""><a href="LeftSquareArrowWire.js.html" title="LeftSquareArrowWire.js">LeftSquareArrowWire.js</a></li>
<li class=""><a href="RectLabelContainer.js.html" title="RectLabelContainer.js">RectLabelContainer.js</a></li>
<li class=""><a href="RightSquareArrowWire.js.html" title="RightSquareArrowWire.js">RightSquareArrowWire.js</a></li>
<li class=""><a href="Scissors.js.html" title="Scissors.js">Scissors.js</a></li>
<li class=""><a href="StepWire.js.html" title="StepWire.js">StepWire.js</a></li>
<li class=""><a href="Terminal.js.html" title="Terminal.js">Terminal.js</a></li>
<li class=""><a href="TerminalInput.js.html" title="TerminalInput.js">TerminalInput.js</a></li>
<li class=""><a href="TerminalOutput.js.html" title="TerminalOutput.js">TerminalOutput.js</a></li>
<li class=""><a href="TerminalProxy.js.html" title="TerminalProxy.js">TerminalProxy.js</a></li>
<li class=""><a href="Wire.js.html" title="Wire.js">Wire.js</a></li>
<li class=""><a href="WireIt.js.html" title="WireIt.js">WireIt.js</a></li>
</ul>
</div>
<div id="propertyList" class="module">
<h4>Properties</h4>
<ul class="content">
<li class=""><a href="#property_element" title="element">element</a></li>
</ul>
</div>
<div id="methodsList" class="module">
<h4>Methods</h4>
<ul class="content">
<li class=""><a href="#method_destroy" title="destroy">destroy</a></li>
<li class=""><a href="#method_getContext" title="getContext">getContext</a></li>
<li class=""><a href="#method_SetCanvasRegion" title="SetCanvasRegion">SetCanvasRegion</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright © 2010 Eric Abouaf All rights reserved.
</div>
</div>
<script type="text/javascript">
var ALL_YUI_PROPS = [{"url": "WireIt.CanvasContainer.html#property_className", "access": "", "host": "WireIt.CanvasContainer", "type": "property", "name": "className"}, {"url": "WireIt.BezierWire.html#property_coeffMulDirection", "access": "", "host": "WireIt.BezierWire", "type": "property", "name": "coeffMulDirection"}, {"url": "WireIt.CanvasContainer.html#property_ddHandle", "access": "", "host": "WireIt.CanvasContainer", "type": "property", "name": "ddHandle"}, {"url": "WireIt.CanvasElement.html#method_destroy", "access": "", "host": "WireIt.CanvasElement", "type": "method", "name": "destroy"}, {"url": "WireIt.ArrowWire.html#method_draw", "access": "", "host": "WireIt.ArrowWire", "type": "method", "name": "draw"}, {"url": "WireIt.BezierArrowWire.html#method_draw", "access": "", "host": "WireIt.BezierArrowWire", "type": "method", "name": "draw"}, {"url": "WireIt.BezierWire.html#method_draw", "access": "", "host": "WireIt.BezierWire", "type": "method", "name": "draw"}, {"url": "WireIt.CanvasContainer.html#method_drawCanvas", "access": "", "host": "WireIt.CanvasContainer", "type": "method", "name": "drawCanvas"}, {"url": "WireIt.CanvasElement.html#property_element", "access": "", "host": "WireIt.CanvasElement", "type": "property", "name": "element"}, {"url": "WireIt.CanvasElement.html#method_getContext", "access": "", "host": "WireIt.CanvasElement", "type": "method", "name": "getContext"}, {"url": "WireIt.CanvasContainer.html#property_height", "access": "", "host": "WireIt.CanvasContainer", "type": "property", "name": "height"}, {"url": "WireIt.CanvasContainer.html#method_onResize", "access": "", "host": "WireIt.CanvasContainer", "type": "method", "name": "onResize"}, {"url": "WireIt.CanvasContainer.html#method_render", "access": "", "host": "WireIt.CanvasContainer", "type": "method", "name": "render"}, {"url": "WireIt.CanvasElement.html#method_SetCanvasRegion", "access": "", "host": "WireIt.CanvasElement", "type": "method", "name": "SetCanvasRegion"}, {"url": "WireIt.CanvasContainer.html#property_width", "access": "", "host": "WireIt.CanvasContainer", "type": "property", "name": "width"}, {"url": "WireIt.ArrowWire.html#property_xtype", "access": "", "host": "WireIt.ArrowWire", "type": "property", "name": "xtype"}, {"url": "WireIt.BezierArrowWire.html#property_xtype", "access": "", "host": "WireIt.BezierArrowWire", "type": "property", "name": "xtype"}, {"url": "WireIt.BezierWire.html#property_xtype", "access": "", "host": "WireIt.BezierWire", "type": "property", "name": "xtype"}, {"url": "WireIt.CanvasContainer.html#property_xtype", "access": "", "host": "WireIt.CanvasContainer", "type": "property", "name": "xtype"}];
</script>
</body>
</html>