git.roojs.org Git - raphael/blob - reference.html

   1 <!DOCTYPE html>
   2 <!-- Generated with Dr.js -->
   3 <html lang="en"><head><meta charset="utf-8"><title>Raphaël Reference</title><link rel="stylesheet" href="dr.css"></head><body id="dr-js"><div class="dr-doc"><ol class="dr-toc"><li class="dr-lvl0"><a href="#Animation" class="undefined"><span>Animation</span></a></li><li class="dr-lvl1"><a href="#Animation.delay" class="dr-method"><span>Animation.delay()</span></a></li><li class="dr-lvl1"><a href="#Animation.repeat" class="dr-method"><span>Animation.repeat()</span></a></li><li class="dr-lvl0"><a href="#Element" class="undefined"><span>Element</span></a></li><li class="dr-lvl1"><a href="#Element.animate" class="dr-method"><span>Element.animate()</span></a></li><li class="dr-lvl1"><a href="#Element.clone" class="dr-method"><span>Element.clone()</span></a></li><li class="dr-lvl1"><a href="#Element.getBBox" class="dr-method"><span>Element.getBBox()</span></a></li><li class="dr-lvl1"><a href="#Element.getPointAtLength" class="dr-method"><span>Element.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Element.getSubpath" class="dr-method"><span>Element.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Element.getTotalLength" class="dr-method"><span>Element.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Element.glow" class="dr-method"><span>Element.glow()</span></a></li><li class="dr-lvl1"><a href="#Element.rotate" class="dr-method"><span>Element.rotate()</span></a></li><li class="dr-lvl1"><a href="#Element.scale" class="dr-method"><span>Element.scale()</span></a></li><li class="dr-lvl1"><a href="#Element.setTime" class="dr-method"><span>Element.setTime()</span></a></li><li class="dr-lvl1"><a href="#Element.status" class="dr-method"><span>Element.status()</span></a></li><li class="dr-lvl1"><a href="#Element.transform" class="dr-method"><span>Element.transform()</span></a></li><li class="dr-lvl1"><a href="#Element.translate" class="dr-method"><span>Element.translate()</span></a></li><li class="dr-lvl0"><a href="#Paper" class="undefined"><span>Paper</span></a></li><li class="dr-lvl1"><a href="#Paper.bottom" class="dr-property"><span>Paper.bottom</span></a></li><li class="dr-lvl1"><a href="#Paper.circle" class="dr-method"><span>Paper.circle()</span></a></li><li class="dr-lvl1"><a href="#Paper.ellipse" class="dr-method"><span>Paper.ellipse()</span></a></li><li class="dr-lvl1"><a href="#Paper.forEach" class="dr-method"><span>Paper.forEach()</span></a></li><li class="dr-lvl1"><a href="#Paper.getById" class="dr-method"><span>Paper.getById()</span></a></li><li class="dr-lvl1"><a href="#Paper.getElementByPoint" class="dr-method"><span>Paper.getElementByPoint()</span></a></li><li class="dr-lvl1"><a href="#Paper.image" class="dr-method"><span>Paper.image()</span></a></li><li class="dr-lvl1"><a href="#Paper.path" class="dr-method"><span>Paper.path()</span></a></li><li class="dr-lvl1"><a href="#Paper.raphael" class="dr-property"><span>Paper.raphael</span></a></li><li class="dr-lvl1"><a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a></li><li class="dr-lvl1"><a href="#Paper.set" class="dr-method"><span>Paper.set()</span></a></li><li class="dr-lvl1"><a href="#Paper.setSize" class="dr-method"><span>Paper.setSize()</span></a></li><li class="dr-lvl1"><a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a></li><li class="dr-lvl1"><a href="#Paper.top" class="dr-property"><span>Paper.top</span></a></li><li class="dr-lvl0"><a href="#Raphael" class="dr-method"><span>Raphael()</span></a></li><li class="dr-lvl1"><a href="#Raphael.angle" class="dr-method"><span>Raphael.angle()</span></a></li><li class="dr-lvl1"><a href="#Raphael.animation" class="dr-method"><span>Raphael.animation()</span></a></li><li class="dr-lvl1"><a href="#Raphael.deg" class="dr-method"><span>Raphael.deg()</span></a></li><li class="dr-lvl1"><a href="#Raphael.easing_formulas" class="dr-property"><span>Raphael.easing_formulas</span></a></li><li class="dr-lvl1"><a href="#Raphael.findDotsAtSegment" class="dr-method"><span>Raphael.findDotsAtSegment()</span></a></li><li class="dr-lvl1"><a href="#Raphael.fn" class="dr-property"><span>Raphael.fn</span></a></li><li class="dr-lvl1"><a href="#Raphael.getColor" class="dr-method"><span>Raphael.getColor()</span></a></li><li class="dr-lvl2"><a href="#Raphael.getColor.reset" class="dr-method"><span>Raphael.getColor.reset()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getPointAtLength" class="dr-method"><span>Raphael.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getRGB" class="dr-method"><span>Raphael.getRGB()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getSubpath" class="dr-method"><span>Raphael.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getTotalLength" class="dr-method"><span>Raphael.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb" class="dr-method"><span>Raphael.hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb2rgb" class="dr-method"><span>Raphael.hsb2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl" class="dr-method"><span>Raphael.hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl2rgb" class="dr-method"><span>Raphael.hsl2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.is" class="dr-method"><span>Raphael.is()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parsePathString" class="dr-method"><span>Raphael.parsePathString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parseTransformString" class="dr-method"><span>Raphael.parseTransformString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.path2curve" class="dr-method"><span>Raphael.path2curve()</span></a></li><li class="dr-lvl1"><a href="#Raphael.pathToRelative" class="dr-method"><span>Raphael.pathToRelative()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rad" class="dr-method"><span>Raphael.rad()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb" class="dr-method"><span>Raphael.rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsb" class="dr-method"><span>Raphael.rgb2hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsl" class="dr-method"><span>Raphael.rgb2hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.setWindow" class="dr-method"><span>Raphael.setWindow()</span></a></li><li class="dr-lvl1"><a href="#Raphael.snapTo" class="dr-method"><span>Raphael.snapTo()</span></a></li><li class="dr-lvl1"><a href="#Raphael.svg" class="dr-property"><span>Raphael.svg</span></a></li><li class="dr-lvl1"><a href="#Raphael.type" class="dr-property"><span>Raphael.type</span></a></li><li class="dr-lvl1"><a href="#Raphael.vml" class="dr-property"><span>Raphael.vml</span></a></li></ol><h1>Raphaël Reference</h1><p class="dr-source">Check out the source: <a href="raphael-src.html">raphael.js</a></p><h2 id="Animation" class="undefined">Animation<a href="#Animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">&#x27ad;</a></h2>
   4 <h3 id="Animation.delay" class="dr-method">Animation.delay(delay)<a href="#Animation.delay" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4752">&#x27ad;</a></h3>
   5 <div class="dr-method"><p>Creates copy of existing animation object with given delay.</p>
   6 <p class="header">Parameters
   7 </p>
   8 <dl class="dr-parameters"><dt class="dr-param">delay</dt>
   9 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
  10 <dd class="dr-description">number of ms to pass between animation start and actual animation</dd>
  11 </dl>
  12 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
  13 </div><h3 id="Animation.repeat" class="dr-method">Animation.repeat(repeat)<a href="#Animation.repeat" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4770">&#x27ad;</a></h3>
  14 <div class="dr-method"><p>Creates copy of existing animation object with given repetition.</p>
  15 <p class="header">Parameters
  16 </p>
  17 <dl class="dr-parameters"><dt class="dr-param">repeat</dt>
  18 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
  19 <dd class="dr-description">number iterations of animation. For infinite animation pass <code>Infinity</code></dd>
  20 </dl>
  21 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
  22 </div><h2 id="Element" class="undefined">Element<a href="#Element" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">&#x27ad;</a></h2>
  23 <h3 id="Element.animate" class="dr-method">Element.animate(…)<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5029">&#x27ad;</a></h3>
  24 <div class="dr-method"><p>Creates and starts animation for given element.</p>
  25 <p class="header">Parameters
  26 </p>
  27 <dl class="dr-parameters"><dt class="dr-param">params</dt>
  28 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
  29 <dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
  30 <dt class="dr-param">ms</dt>
  31 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
  32 <dd class="dr-description">number of milliseconds for animation to run</dd>
  33 <dt class="dr-param optional">easing</dt>
  34 <dd class="dr-optional">optional</dd>
  35 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
  36 <dd class="dr-description">easing type. Accept on of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic-bezier(XX, XX, XX, XX)</code></dd>
  37 <dt class="dr-param optional">callback</dt>
  38 <dd class="dr-optional">optional</dd>
  39 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
  40 <dd class="dr-description">callback function. Will be called at the end of animation.</dd>
  41 </dl>
  42 <p>or</p>
  43 <dl class="dr-parameters"><dt class="dr-param">animation</dt>
  44 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
  45 <dd class="dr-description">animation object, see <a href="#Raphael.animation" class="dr-link">Raphael.animation</a></dd>
  46 </dl>
  47 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
  48 </div><h3 id="Element.clone" class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4225">&#x27ad;</a></h3>
  49 <div class="dr-method"><p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">clone of a given element</span></p>
  50 </div><h3 id="Element.getBBox" class="dr-method">Element.getBBox(isWithoutTransform)<a href="#Element.getBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4193">&#x27ad;</a></h3>
  51 <div class="dr-method"><p>Return bounding box for a given element</p>
  52 <p class="header">Parameters
  53 </p>
  54 <dl class="dr-parameters"><dt class="dr-param">isWithoutTransform</dt>
  55 <dd class="dr-type"><em class="dr-type-boolean">boolean</em></dd>
  56 <dd class="dr-description">flag, <code>true</code> if you want to have bounding box before transformations. Default is <code>false</code>.</dd>
  57 </dl>
  58 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Bounding box object:</span></p>
  59 <pre class="javascript code"><code>{
  60     x: <span class="c">//top left corner x,</span>
  61     y: <span class="c">//top left corner y,</span>
  62     width: <span class="c">//width,</span>
  63     height: <span class="c">//height</span>
  64 }
  65 </code></pre>
  66 </div><h3 id="Element.getPointAtLength" class="dr-method">Element.getPointAtLength(length)<a href="#Element.getPointAtLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4428">&#x27ad;</a></h3>
  67 <div class="dr-method"><p>Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.</p>
  68 <p class="header">Parameters
  69 </p>
  70 <dl class="dr-parameters"><dt class="dr-param">length</dt>
  71 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
  72 <dd class="dr-description">&#160;</dd>
  73 </dl>
  74 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
  75 <pre class="javascript code"><code>{
  76     x: <span class="c">//x coordinate,</span>
  77     y: <span class="c">//y coordinate,</span>
  78     alpha: <span class="c">//angle of derivative</span>
  79 }
  80 </code></pre>
  81 </div><h3 id="Element.getSubpath" class="dr-method">Element.getSubpath(from, to)<a href="#Element.getSubpath" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4445">&#x27ad;</a></h3>
  82 <div class="dr-method"><p>Return subpath of a given element from given length to given length. Only works for element of “path” type.</p>
  83 <p class="header">Parameters
  84 </p>
  85 <dl class="dr-parameters"><dt class="dr-param">from</dt>
  86 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
  87 <dd class="dr-description">position of the start of the segment</dd>
  88 <dt class="dr-param">to</dt>
  89 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
  90 <dd class="dr-description">position of the end of the segment</dd>
  91 </dl>
  92 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">pathstring for the segment</span></p>
  93 </div><h3 id="Element.getTotalLength" class="dr-method">Element.getTotalLength()<a href="#Element.getTotalLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4404">&#x27ad;</a></h3>
  94 <div class="dr-method"><p>Returns length of the path in pixels. Only works for element of “path” type.</p>
  95 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length.</span></p>
  96 </div><h3 id="Element.glow" class="dr-method">Element.glow()<a href="#Element.glow" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4244">&#x27ad;</a></h3>
  97 <div class="dr-method"><p>Return set of elements that create glow-like effect around given element. See <a href="#Paper.set." class="dr-link">Paper.set.</a></p>
  98 <p>Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.</p>
  99 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">set of elements that represents glow</span></p>
 100 </div><h3 id="Element.rotate" class="dr-method">Element.rotate(deg, [cx], [cy])<a href="#Element.rotate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2369">&#x27ad;</a></h3>
 101 <div class="dr-method"><p>Adds rotation by given angle around given point to the list oftransformations of the element.</p>
 102 <p class="header">Parameters
 103 </p>
 104 <dl class="dr-parameters"><dt class="dr-param">deg</dt>
 105 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 106 <dd class="dr-description">angle in degrees</dd>
 107 <dt class="dr-param optional">cx</dt>
 108 <dd class="dr-optional">optional</dd>
 109 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 110 <dd class="dr-description">x coordinate of the centre of rotation</dd>
 111 <dt class="dr-param optional">cy</dt>
 112 <dd class="dr-optional">optional</dd>
 113 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 114 <dd class="dr-description">y coordinate of the centre of rotation</dd>
 115 </dl>
 116 <p>If cx <em class="amp">&amp;</em> cy aren’t specified centre of the shape is used as a point of rotation.</p>
 117 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
 118 </div><h3 id="Element.scale" class="dr-method">Element.scale(sx, sy, [cx], [cy])<a href="#Element.scale" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2402">&#x27ad;</a></h3>
 119 <div class="dr-method"><p>Adds scale by given amount relative to given point to the list oftransformations of the element.</p>
 120 <p class="header">Parameters
 121 </p>
 122 <dl class="dr-parameters"><dt class="dr-param">sx</dt>
 123 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 124 <dd class="dr-description">horisontal scale amount</dd>
 125 <dt class="dr-param">sy</dt>
 126 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 127 <dd class="dr-description">vertical scale amount</dd>
 128 <dt class="dr-param optional">cx</dt>
 129 <dd class="dr-optional">optional</dd>
 130 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 131 <dd class="dr-description">x coordinate of the centre of scale</dd>
 132 <dt class="dr-param optional">cy</dt>
 133 <dd class="dr-optional">optional</dd>
 134 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 135 <dd class="dr-description">y coordinate of the centre of scale</dd>
 136 </dl>
 137 <p>If cx <em class="amp">&amp;</em> cy aren’t specified centre of the shape is used instead.</p>
 138 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
 139 </div><h3 id="Element.setTime" class="dr-method">Element.setTime(anim, value)<a href="#Element.setTime" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5052">&#x27ad;</a></h3>
 140 <div class="dr-method"><p>Sets the status of animation of the element in milliseconds. Similar to <a href="#Element.status" class="dr-link">Element.status</a> method.</p>
 141 <p class="header">Parameters
 142 </p>
 143 <dl class="dr-parameters"><dt class="dr-param">anim</dt>
 144 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
 145 <dd class="dr-description">animation object</dd>
 146 <dt class="dr-param">value</dt>
 147 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 148 <dd class="dr-description">number of milliseconds from the beginning of the animation</dd>
 149 </dl>
 150 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
 151 </div><h3 id="Element.status" class="dr-method">Element.status([anim], [value])<a href="#Element.status" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5082">&#x27ad;</a></h3>
 152 <div class="dr-method"><p>Gets or sets the status of animation of the element.</p>
 153 <p class="header">Parameters
 154 </p>
 155 <dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
 156 <dd class="dr-optional">optional</dd>
 157 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
 158 <dd class="dr-description">animation object</dd>
 159 <dt class="dr-param optional">value</dt>
 160 <dd class="dr-optional">optional</dd>
 161 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 162 <dd class="dr-description">0 – 1. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.</dd>
 163 </dl>
 164 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">status</span></p>
 165 <p>or</p>
 166 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">status if <code>anim</code> is not specified in format:</span></p>
 167 <pre class="javascript code"><code>[{
 168     anim: <span class="c">// animation object,</span>
 169     status: <span class="c">// status</span>
 170 }, {
 171     anim: <span class="c">// animation object,</span>
 172     status: <span class="c">// status</span>
 173 }, ...]
 174 </code></pre>
 175 <p>or</p>
 176 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
 177 </div><h3 id="Element.transform" class="dr-method">Element.transform([tstr])<a href="#Element.transform" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2468">&#x27ad;</a></h3>
 178 <div class="dr-method"><p>Adds transformation to the element which is separate to other attributes,i.e. translation doesn’t change <code>x</code> or <code>y</code> of the rectange. The formatof transformation string is similar to the path string syntax:</p>
 179 <pre class="javascript code"><code><i>"t100,100r30,<span class="d">100</span>,100s2,<span class="d">2</span>,<span class="d">100</span>,100r45s1<span class="d">.5</span>"</i>
 180 </code></pre>
 181 <p>Each letter is a command. There are four commands: <code>t</code> is for translate, <code>r</code> is for rotate, <code>s</code> is forscale and <code>m</code> is for matrix.</p>
 182 <p>So, example line could be read like “translate by 100, 100, rotate 30° around 100, 100, scale twice around 100, 100rotate 45° around centre and scale 1.5 times relative to centre”. As you see rotate and scale commands has origincoordinates as a optional parameters.Matrix accepts six parameters.</p>
 183 <p class="header">Parameters
 184 </p>
 185 <dl class="dr-parameters"><dt class="dr-param optional">tstr</dt>
 186 <dd class="dr-optional">optional</dd>
 187 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 188 <dd class="dr-description">transformation string</dd>
 189 </dl>
 190 <p>If tstr isn’t specified</p>
 191 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">current transformation string</span></p>
 192 <p>else</p>
 193 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
 194 </div><h3 id="Element.translate" class="dr-method">Element.translate(dx, dy)<a href="#Element.translate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2433">&#x27ad;</a></h3>
 195 <div class="dr-method"><p>Adds translation by given amount to the list of transformations of the element.</p>
 196 <p class="header">Parameters
 197 </p>
 198 <dl class="dr-parameters"><dt class="dr-param">dx</dt>
 199 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 200 <dd class="dr-description">horisontal shift</dd>
 201 <dt class="dr-param">dy</dt>
 202 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 203 <dd class="dr-description">vertical shift</dd>
 204 </dl>
 205 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
 206 </div><h2 id="Paper" class="undefined">Paper<a href="#Paper" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">&#x27ad;</a></h2>
 207 <h3 id="Paper.bottom" class="dr-property">Paper.bottom<a href="#Paper.bottom" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4065">&#x27ad;</a></h3>
 208 <div class="dr-property"><p>Points to the bottom element on the paper</p>
 209 </div><h3 id="Paper.circle" class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3905">&#x27ad;</a></h3>
 210 <div class="dr-method"><p>Draws a circle.</p>
 211 <p class="header">Parameters
 212 </p>
 213 <dl class="dr-parameters"><dt class="dr-param">x</dt>
 214 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 215 <dd class="dr-description">x coordinate of the centre</dd>
 216 <dt class="dr-param">y</dt>
 217 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 218 <dd class="dr-description">y coordinate of the centre</dd>
 219 <dt class="dr-param">r</dt>
 220 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 221 <dd class="dr-description">radius</dd>
 222 </dl>
 223 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “circle”</span></p>
 224 <p class="header">Usage
 225 </p>
 226 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>);
 227 </code></pre>
 228 </div><h3 id="Paper.ellipse" class="dr-method">Paper.ellipse(x, y, rx, ry)<a href="#Paper.ellipse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3949">&#x27ad;</a></h3>
 229 <div class="dr-method"><p>Draws an ellipse.</p>
 230 <p class="header">Parameters
 231 </p>
 232 <dl class="dr-parameters"><dt class="dr-param">x</dt>
 233 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 234 <dd class="dr-description">x coordinate of the centre</dd>
 235 <dt class="dr-param">y</dt>
 236 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 237 <dd class="dr-description">y coordinate of the centre</dd>
 238 <dt class="dr-param">rx</dt>
 239 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 240 <dd class="dr-description">horisontal radius</dd>
 241 <dt class="dr-param">ry</dt>
 242 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 243 <dd class="dr-description">vertical radius</dd>
 244 </dl>
 245 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “ellipse”</span></p>
 246 <p class="header">Usage
 247 </p>
 248 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.ellipse(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>, <span class="d">20</span>);
 249 </code></pre>
 250 </div><h3 id="Paper.forEach" class="dr-method">Paper.forEach(callback, thisArg)<a href="#Paper.forEach" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4160">&#x27ad;</a></h3>
 251 <div class="dr-method"><p>Executes given function for each element on the paper</p>
 252 <p>If function returns <code>false</code> it will stop loop running.</p>
 253 <p class="header">Parameters
 254 </p>
 255 <dl class="dr-parameters"><dt class="dr-param">callback</dt>
 256 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
 257 <dd class="dr-description">function to run</dd>
 258 <dt class="dr-param">thisArg</dt>
 259 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
 260 <dd class="dr-description">context object for the callback</dd>
 261 </dl>
 262 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Paper object</span></p>
 263 </div><h3 id="Paper.getById" class="dr-method">Paper.getById(id)<a href="#Paper.getById" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4136">&#x27ad;</a></h3>
 264 <div class="dr-method"><p>Returns you element by it’s internal ID.</p>
 265 <p class="header">Parameters
 266 </p>
 267 <dl class="dr-parameters"><dt class="dr-param">id</dt>
 268 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 269 <dd class="dr-description">id</dd>
 270 </dl>
 271 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
 272 </div><h3 id="Paper.getElementByPoint" class="dr-method">Paper.getElementByPoint(x, y)<a href="#Paper.getElementByPoint" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4100">&#x27ad;</a></h3>
 273 <div class="dr-method"><p>Returns you topmost element under given point.</p>
 274 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
 275 <p class="header">Parameters
 276 </p>
 277 <dl class="dr-parameters"><dt class="dr-param">x</dt>
 278 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 279 <dd class="dr-description">x coordinate from the top left corner of the window</dd>
 280 <dt class="dr-param">y</dt>
 281 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 282 <dd class="dr-description">y coordinate from the top left corner of the window</dd>
 283 </dl>
 284 <p class="header">Usage
 285 </p>
 286 <pre class="javascript code"><code>paper.getElementByPoint(mouseX, mouseY).attr({stroke: <i>"#f00"</i>});
 287 </code></pre>
 288 </div><h3 id="Paper.image" class="dr-method">Paper.image(src, x, y, width, height)<a href="#Paper.image" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3991">&#x27ad;</a></h3>
 289 <div class="dr-method"><p>Embeds an image into the surface.</p>
 290 <p class="header">Parameters
 291 </p>
 292 <dl class="dr-parameters"><dt class="dr-param">src</dt>
 293 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 294 <dd class="dr-description">URI of the source image</dd>
 295 <dt class="dr-param">x</dt>
 296 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 297 <dd class="dr-description">x coordinate position</dd>
 298 <dt class="dr-param">y</dt>
 299 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 300 <dd class="dr-description">y coordinate position</dd>
 301 <dt class="dr-param">width</dt>
 302 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 303 <dd class="dr-description">width of the image</dd>
 304 <dt class="dr-param">height</dt>
 305 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 306 <dd class="dr-description">height of the image</dd>
 307 </dl>
 308 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “image”</span></p>
 309 <p class="header">Usage
 310 </p>
 311 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.image(<i>"apple.png"</i>, <span class="d">10</span>, <span class="d">10</span>, <span class="d">80</span>, <span class="d">80</span>);
 312 </code></pre>
 313 </div><h3 id="Paper.path" class="dr-method">Paper.path(pathString)<a href="#Paper.path" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3969">&#x27ad;</a></h3>
 314 <div class="dr-method"><p>Creates a path element by given path data string.</p>
 315 <p class="header">Parameters
 316 </p>
 317 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
 318 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 319 <dd class="dr-description">path data in SVG path string format.</dd>
 320 </dl>
 321 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “ellipse”</span></p>
 322 Details of a path's data attribute's format are described in the <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG specification</a>.
 323 <p class="header">Usage
 324 </p>
 325 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.path(<i>"M10 10L90 <span class="d">90</span>"</i>);
 326 <span class="c">// draw a diagonal line:</span>
 327 <span class="c">// move to <span class="d">10</span>,<span class="d">10</span>, line to <span class="d">90</span>,<span class="d">90</span></span>
 328 </code></pre>
 329 </div><h3 id="Paper.raphael" class="dr-property">Paper.raphael<a href="#Paper.raphael" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4072">&#x27ad;</a></h3>
 330 <div class="dr-property"><p>Points to the <a href="#Raphael" class="dr-link">Raphael</a> object/function</p>
 331 </div><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, r)<a href="#Paper.rect" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3929">&#x27ad;</a></h3>
 332 <div class="dr-method"><p></p>
 333 <p>Draws a rectangle.</p>
 334 <p class="header">Parameters
 335 </p>
 336 <dl class="dr-parameters"><dt class="dr-param">x</dt>
 337 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 338 <dd class="dr-description">x coordinate of the top left corner</dd>
 339 <dt class="dr-param">y</dt>
 340 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 341 <dd class="dr-description">y coordinate of the top left corner</dd>
 342 <dt class="dr-param">width</dt>
 343 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 344 <dd class="dr-description">width</dd>
 345 <dt class="dr-param">height</dt>
 346 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 347 <dd class="dr-description">height</dd>
 348 <dt class="dr-param">r</dt>
 349 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 350 <dd class="dr-description"><a href="#optional" class="dr-link">optional</a> radius for rounded corners, default is 0</dd>
 351 </dl>
 352 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “rect”</span></p>
 353 <p class="header">Usage
 354 </p>
 355 <pre class="javascript code"><code><span class="c">// regular rectangle</span>
 356 <b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">10</span>, <span class="d">50</span>, <span class="d">50</span>);
 357 <span class="c">// rectangle <b>with</b> rounded corners</span>
 358 <b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">40</span>, <span class="d">40</span>, <span class="d">50</span>, <span class="d">50</span>, <span class="d">10</span>);
 359 </code></pre>
 360 </div><h3 id="Paper.set" class="dr-method">Paper.set()<a href="#Paper.set" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4029">&#x27ad;</a></h3>
 361 <div class="dr-method"><p>Creates array-like object to keep and operate couple of elements at once.Warning: it doesn’t create any elements for itself in the page.</p>
 362 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">array-like object that represents set of elements</span></p>
 363 <p class="header">Usage
 364 </p>
 365 <pre class="javascript code"><code><b>var</b> st<span class="s"> = </span>paper.set();
 366 st.push(
 367     paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
 368     paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
 369 );
 370 st.attr({fill: <i>"red"</i>});
 371 </code></pre>
 372 </div><h3 id="Paper.setSize" class="dr-method">Paper.setSize(width, height)<a href="#Paper.setSize" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4051">&#x27ad;</a></h3>
 373 <div class="dr-method"><p>If you need to change dimensions of the canvas call this method</p>
 374 <p class="header">Parameters
 375 </p>
 376 <dl class="dr-parameters"><dt class="dr-param">width</dt>
 377 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 378 <dd class="dr-description">new width of the canvas</dd>
 379 <dt class="dr-param">height</dt>
 380 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 381 <dd class="dr-description">new height of the canvas</dd>
 382 </dl>
 383 <p class="header">Usage
 384 </p>
 385 <pre class="javascript code"><code><b>var</b> st<span class="s"> = </span>paper.set();
 386 st.push(
 387     paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
 388     paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
 389 );
 390 st.attr({fill: <i>"red"</i>});
 391 </code></pre>
 392 </div><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4010">&#x27ad;</a></h3>
 393 <div class="dr-method"><p>Draws a text string. If you need line breaks, put “\n” in the string.</p>
 394 <p class="header">Parameters
 395 </p>
 396 <dl class="dr-parameters"><dt class="dr-param">x</dt>
 397 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 398 <dd class="dr-description">x coordinate position</dd>
 399 <dt class="dr-param">y</dt>
 400 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 401 <dd class="dr-description">y coordinate position</dd>
 402 <dt class="dr-param">text</dt>
 403 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 404 <dd class="dr-description">The text string to draw</dd>
 405 </dl>
 406 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “text”</span></p>
 407 <p class="header">Usage
 408 </p>
 409 <pre class="javascript code"><code><b>var</b> t<span class="s"> = </span>paper.text(<span class="d">50</span>, <span class="d">50</span>, <i>"Raphaël\nkicks\nbutt!"</i>);
 410 </code></pre>
 411 </div><h3 id="Paper.top" class="dr-property">Paper.top<a href="#Paper.top" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4059">&#x27ad;</a></h3>
 412 <div class="dr-property"><p>Points to the topmost element on the paper</p>
 413 </div><h2 id="Raphael" class="dr-method">Raphael(…)<a href="#Raphael" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L55">&#x27ad;</a></h2>
 414 <div class="dr-method"><p>Creates a canvas object on which to draw.You must do this first, as all future calls to drawing methodsfrom this instance will be bound to this canvas.</p>
 415 <p class="header">Parameters
 416 </p>
 417 <dl class="dr-parameters"><dt class="dr-param">container</dt>
 418 <dd class="dr-type"><em class="dr-type-HTMLElement">HTMLElement</em> <em class="dr-type-string">string</em></dd>
 419 <dd class="dr-description">DOM element or it’s id which is going to be a parent for drawing surface</dd>
 420 <dt class="dr-param">width</dt>
 421 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 422 <dd class="dr-description">&#160;</dd>
 423 <dt class="dr-param">height</dt>
 424 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 425 <dd class="dr-description">&#160;</dd>
 426 </dl>
 427 <p>or</p>
 428 <dl class="dr-parameters"><dt class="dr-param">x</dt>
 429 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 430 <dd class="dr-description">&#160;</dd>
 431 <dt class="dr-param">y</dt>
 432 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 433 <dd class="dr-description">&#160;</dd>
 434 <dt class="dr-param">width</dt>
 435 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 436 <dd class="dr-description">&#160;</dd>
 437 <dt class="dr-param">height</dt>
 438 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 439 <dd class="dr-description">&#160;</dd>
 440 </dl>
 441 <p>or</p>
 442 <dl class="dr-parameters"><dt class="dr-param">all</dt>
 443 <dd class="dr-type"><em class="dr-type-array">array</em></dd>
 444 <dd class="dr-description">(first 3 or 4 elements in the array are equal to [containerID, width, height] or [x, y, width, height]. The rest are element descriptions in format {type: type, &lt;attributes>})</dd>
 445 </dl>
 446 <p>or</p>
 447 <dl class="dr-parameters"><dt class="dr-param">onReadyCallback</dt>
 448 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
 449 <dd class="dr-description">function that is going to be called on DOM ready event. You can also subscribe to this event via Eve’s “DOMLoad” event. In this case method returns <code>undefined</code>.</dd>
 450 </dl>
 451 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Paper" class="dr-link">Paper</a></span></p>
 452 <p class="header">Usage
 453 </p>
 454 <pre class="javascript code"><code><span class="c">// Each of the following examples create a canvas that is 320px wide by 200px high</span>
 455 <span class="c">// Canvas is created at the viewport’s <span class="d">10</span>,<span class="d">50</span> coordinate</span>
 456 <b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">50</span>, <span class="d">320</span>, <span class="d">200</span>);
 457 <span class="c">// Canvas is created at the top left corner of the #notepad element</span>
 458 <span class="c">// (or its top right corner <b>in</b> dir=<i>"rtl"</i> elements)</span>
 459 <b>var</b> paper<span class="s"> = </span>Raphael(document.getElementById(<i>"notepad"</i>), <span class="d">320</span>, <span class="d">200</span>);
 460 <span class="c">// Same as above</span>
 461 <b>var</b> paper<span class="s"> = </span>Raphael(<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>);
 462 <span class="c">// Image dump</span>
 463 <b>var</b> set<span class="s"> = </span>Raphael([<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>, {
 464     type: <i>"rect"</i>,
 465     x: <span class="d">10</span>,
 466     y: <span class="d">10</span>,
 467     width: <span class="d">25</span>,
 468     height: <span class="d">25</span>,
 469     stroke: <i>"#f00"</i>
 470 }, {
 471     type: <i>"text"</i>,
 472     x: <span class="d">30</span>,
 473     y: <span class="d">40</span>,
 474     text: <i>"Dump"</i>
 475 }]);
 476 </code></pre>
 477 </div><h3 id="Raphael.angle" class="dr-method">Raphael.angle(x1, y1, x2, y2, [x3], [y3])<a href="#Raphael.angle" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L298">&#x27ad;</a></h3>
 478 <div class="dr-method"><p>Returns angle between two or three points</p>
 479 <p class="header">Parameters
 480 </p>
 481 <dl class="dr-parameters"><dt class="dr-param">x1</dt>
 482 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 483 <dd class="dr-description">x coord of first point</dd>
 484 <dt class="dr-param">y1</dt>
 485 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 486 <dd class="dr-description">y coord of first point</dd>
 487 <dt class="dr-param">x2</dt>
 488 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 489 <dd class="dr-description">x coord of second point</dd>
 490 <dt class="dr-param">y2</dt>
 491 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 492 <dd class="dr-description">y coord of second point</dd>
 493 <dt class="dr-param optional">x3</dt>
 494 <dd class="dr-optional">optional</dd>
 495 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 496 <dd class="dr-description">x coord of third point</dd>
 497 <dt class="dr-param optional">y3</dt>
 498 <dd class="dr-optional">optional</dd>
 499 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 500 <dd class="dr-description">y coord of third point</dd>
 501 </dl>
 502 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees.</span></p>
 503 </div><h3 id="Raphael.animation" class="dr-method">Raphael.animation(params, ms, [easing], [callback])<a href="#Raphael.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4990">&#x27ad;</a></h3>
 504 <div class="dr-method"><p>Creates animation object. That later could be used for <a href="#Element.animate" class="dr-link">Element.animate</a> or <a href="#Element.animateWith" class="dr-link">Element.animateWith</a> methods.See also <a href="#Animation.delay" class="dr-link">Animation.delay</a> and <a href="#Animation.repeat" class="dr-link">Animation.repeat</a> methods.</p>
 505 <p class="header">Parameters
 506 </p>
 507 <dl class="dr-parameters"><dt class="dr-param">params</dt>
 508 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
 509 <dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
 510 <dt class="dr-param">ms</dt>
 511 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 512 <dd class="dr-description">number of milliseconds for animation to run</dd>
 513 <dt class="dr-param optional">easing</dt>
 514 <dd class="dr-optional">optional</dd>
 515 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 516 <dd class="dr-description">easing type. Accept one of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic-bezier(XX, XX, XX, XX)</code></dd>
 517 <dt class="dr-param optional">callback</dt>
 518 <dd class="dr-optional">optional</dd>
 519 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
 520 <dd class="dr-description">callback function. Will be called at the end of animation.</dd>
 521 </dl>
 522 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Animation" class="dr-link">Animation</a></span></p>
 523 </div><h3 id="Raphael.deg" class="dr-method">Raphael.deg(deg)<a href="#Raphael.deg" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L331">&#x27ad;</a></h3>
 524 <div class="dr-method"><p>Transform angle to degrees</p>
 525 <p class="header">Parameters
 526 </p>
 527 <dl class="dr-parameters"><dt class="dr-param">deg</dt>
 528 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 529 <dd class="dr-description">angle in radians</dd>
 530 </dl>
 531 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees.</span></p>
 532 </div><h3 id="Raphael.easing_formulas" class="dr-property">Raphael.easing_formulas<a href="#Raphael.easing_formulas" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4466">&#x27ad;</a></h3>
 533 <div class="dr-property"><p>Object that contains easing formulas for animation. You could extend it with your owns. By default it has following list of easing:</p>
 534 <ul>
 535     <li>“linear”</li>
 536     <li>“&lt;” or “easeIn” or “ease-in”</li>
 537     <li>“>” or “easeOut” or “ease-out”</li>
 538     <li>“&lt;>” or “easeInOut” or “ease-in-out”</li>
 539     <li>“backIn” or “back-in”</li>
 540     <li>“backOut” or “back-out”</li>
 541     <li>“elastic”</li>
 542     <li>“bounce”</li>
 543 </ul>
 544 <p>See also <a href="http://raphaeljs.com/easing.html">Easing demo</a>.</p>
 545 </div><h3 id="Raphael.findDotsAtSegment" class="dr-method">Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Raphael.findDotsAtSegment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L940">&#x27ad;</a></h3>
 546 <div class="dr-method"><p>Utility methodFind dot coordinates on the given cubic bezier curve at the given t.</p>
 547 <p class="header">Parameters
 548 </p>
 549 <dl class="dr-parameters"><dt class="dr-param">p1x</dt>
 550 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 551 <dd class="dr-description">x of the first point of the curve</dd>
 552 <dt class="dr-param">p1y</dt>
 553 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 554 <dd class="dr-description">y of the first point of the curve</dd>
 555 <dt class="dr-param">c1x</dt>
 556 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 557 <dd class="dr-description">x of the first anchor of the curve</dd>
 558 <dt class="dr-param">c1y</dt>
 559 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 560 <dd class="dr-description">y of the first anchor of the curve</dd>
 561 <dt class="dr-param">c2x</dt>
 562 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 563 <dd class="dr-description">x of the second anchor of the curve</dd>
 564 <dt class="dr-param">c2y</dt>
 565 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 566 <dd class="dr-description">y of the second anchor of the curve</dd>
 567 <dt class="dr-param">p2x</dt>
 568 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 569 <dd class="dr-description">x of the second point of the curve</dd>
 570 <dt class="dr-param">p2y</dt>
 571 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 572 <dd class="dr-description">y of the second point of the curve</dd>
 573 <dt class="dr-param">t</dt>
 574 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 575 <dd class="dr-description">position on the curve (0..1)</dd>
 576 </dl>
 577 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">point information in format:</span></p>
 578 <pre class="javascript code"><code>{
 579     x: <span class="c">// x coordinate of the point,</span>
 580     y: <span class="c">// y coordinate of the point,</span>
 581     m: {
 582         x: <span class="c">// x coordinate of the left anchor,</span>
 583         y: <span class="c">// y coordinate of the left anchor</span>
 584     },
 585     n: {
 586         x: <span class="c">// x coordinate of the right anchor,</span>
 587         y: <span class="c">// y coordinate of the right anchor</span>
 588     },
 589     start: {
 590         x: <span class="c">// x coordinate of the start of the curve,</span>
 591         y: <span class="c">// y coordinate of the start of the curve</span>
 592     },
 593     end: {
 594         x: <span class="c">// x coordinate of the end of the curve,</span>
 595         y: <span class="c">// y coordinate of the end of the curve</span>
 596     },
 597     alpha: <span class="c">// angle of the curve derivative at the point.</span>
 598 }
 599 </code></pre>
 600 </div><h3 id="Raphael.fn" class="dr-property">Raphael.fn<a href="#Raphael.fn" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L262">&#x27ad;</a></h3>
 601 <div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to the canvas. For example if you want to draw pie chart,you can create your own pie chart function and ship it as a Raphaël plugin. To do thisyou need to extend <code>Raphael.fn</code> object. Please note that you can create your own namespacesinside <code>fn</code> object. Methods will be run in context of canvas anyway. You should alter <code>fn</code>object before Raphaël instance was created, otherwise it will take no effect.</p>
 602 <p class="header">Usage
 603 </p>
 604 <pre class="javascript code"><code>Raphael.fn.arrow<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, size) {
 605     <b>return</b> <b>this</b>.path( ... );
 606 };
 607 <span class="c">// or create namespace</span>
 608 Raphael.fn.mystuff<span class="s"> = </span>{
 609     arrow: <b>function</b> () {…},
 610     star: <b>function</b> () {…},
 611     <span class="c">// etc…</span>
 612 };
 613 <b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">10</span>, <span class="d">630</span>, <span class="d">480</span>);
 614 <span class="c">// then use it</span>
 615 paper.arrow(<span class="d">10</span>, <span class="d">10</span>, <span class="d">30</span>, <span class="d">30</span>, <span class="d">5</span>).attr({fill: <i>"#f00"</i>});
 616 paper.mystuff.arrow();
 617 paper.mystuff.star();
 618 </code></pre>
 619 </div><h3 id="Raphael.getColor" class="dr-method">Raphael.getColor([value])<a href="#Raphael.getColor" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L803">&#x27ad;</a></h3>
 620 <div class="dr-method"><p>On each call returns next colour in the spectrum. To reset it back to red call <a href="#Raphael.getColor.reset" class="dr-link">Raphael.getColor.reset</a></p>
 621 <p class="header">Parameters
 622 </p>
 623 <dl class="dr-parameters"><dt class="dr-param optional">value</dt>
 624 <dd class="dr-optional">optional</dd>
 625 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 626 <dd class="dr-description">brightness, default is <code>0.75</code></dd>
 627 </dl>
 628 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
 629 </div><h4 id="Raphael.getColor.reset" class="dr-method">Raphael.getColor.reset()<a href="#Raphael.getColor.reset" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L820">&#x27ad;</a></h4>
 630 <div class="dr-method"><p>Resets spectrum position for <a href="#Raphael.getColor" class="dr-link">Raphael.getColor</a> back to red.</p>
 631 </div><h3 id="Raphael.getPointAtLength" class="dr-method">Raphael.getPointAtLength(path, length)<a href="#Raphael.getPointAtLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4375">&#x27ad;</a></h3>
 632 <div class="dr-method"><p>Return coordinates of the point located at the given length on the given path.</p>
 633 <p class="header">Parameters
 634 </p>
 635 <dl class="dr-parameters"><dt class="dr-param">path</dt>
 636 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 637 <dd class="dr-description">SVG path string</dd>
 638 <dt class="dr-param">length</dt>
 639 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 640 <dd class="dr-description">&#160;</dd>
 641 </dl>
 642 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
 643 <pre class="javascript code"><code>{
 644     x: <span class="c">//x coordinate,</span>
 645     y: <span class="c">//y coordinate,</span>
 646     alpha: <span class="c">//angle of derivative</span>
 647 }
 648 </code></pre>
 649 </div><h3 id="Raphael.getRGB" class="dr-method">Raphael.getRGB(colour)<a href="#Raphael.getRGB" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L681">&#x27ad;</a></h3>
 650 <div class="dr-method"><p>Parses colour string as RGB object</p>
 651 <p class="header">Parameters
 652 </p>
 653 <dl class="dr-parameters"><dt class="dr-param">colour</dt>
 654 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 655 <dd class="dr-description">colour string in one of formats:</dd>
 656 </dl>
 657 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
 658 <pre class="javascript code"><code>{
 659     r: <span class="c">// red,</span>
 660     g: <span class="c">// green,</span>
 661     b: <span class="c">// blue</span>
 662     hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••,</span>
 663     error: <span class="c">// <b>true</b> <b>if</b> string can’t be parsed</span>
 664 }
 665 </code></pre>
 666 </div><h3 id="Raphael.getSubpath" class="dr-method">Raphael.getSubpath(path, from, to)<a href="#Raphael.getSubpath" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4390">&#x27ad;</a></h3>
 667 <div class="dr-method"><p>Return subpath of a given path from given length to given length.</p>
 668 <p class="header">Parameters
 669 </p>
 670 <dl class="dr-parameters"><dt class="dr-param">path</dt>
 671 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 672 <dd class="dr-description">SVG path string</dd>
 673 <dt class="dr-param">from</dt>
 674 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 675 <dd class="dr-description">position of the start of the segment</dd>
 676 <dt class="dr-param">to</dt>
 677 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 678 <dd class="dr-description">position of the end of the segment</dd>
 679 </dl>
 680 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">pathstring for the segment</span></p>
 681 </div><h3 id="Raphael.getTotalLength" class="dr-method">Raphael.getTotalLength(path)<a href="#Raphael.getTotalLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4356">&#x27ad;</a></h3>
 682 <div class="dr-method"><p>Returns length of the given path in pixels.</p>
 683 <p class="header">Parameters
 684 </p>
 685 <dl class="dr-parameters"><dt class="dr-param">path</dt>
 686 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 687 <dd class="dr-description">SVG path string.</dd>
 688 </dl>
 689 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length.</span></p>
 690 </div><h3 id="Raphael.hsb" class="dr-method">Raphael.hsb(h, s, b)<a href="#Raphael.hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L763">&#x27ad;</a></h3>
 691 <div class="dr-method"><p>Converts HSB values to hex representation of the colour.</p>
 692 <p class="header">Parameters
 693 </p>
 694 <dl class="dr-parameters"><dt class="dr-param">h</dt>
 695 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 696 <dd class="dr-description">hue</dd>
 697 <dt class="dr-param">s</dt>
 698 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 699 <dd class="dr-description">saturation</dd>
 700 <dt class="dr-param">b</dt>
 701 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 702 <dd class="dr-description">value or brightness</dd>
 703 </dl>
 704 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
 705 </div><h3 id="Raphael.hsb2rgb" class="dr-method">Raphael.hsb2rgb(h, s, v)<a href="#Raphael.hsb2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L488">&#x27ad;</a></h3>
 706 <div class="dr-method"><p>Converts HSB values to RGB object.</p>
 707 <p class="header">Parameters
 708 </p>
 709 <dl class="dr-parameters"><dt class="dr-param">h</dt>
 710 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 711 <dd class="dr-description">hue</dd>
 712 <dt class="dr-param">s</dt>
 713 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 714 <dd class="dr-description">saturation</dd>
 715 <dt class="dr-param">v</dt>
 716 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 717 <dd class="dr-description">value or brightness</dd>
 718 </dl>
 719 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
 720 <pre class="javascript code"><code>{
 721     r: <span class="c">// red,</span>
 722     g: <span class="c">// green,</span>
 723     b: <span class="c">// blue</span>
 724     hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
 725 }
 726 </code></pre>
 727 </div><h3 id="Raphael.hsl" class="dr-method">Raphael.hsl(h, s, l)<a href="#Raphael.hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L777">&#x27ad;</a></h3>
 728 <div class="dr-method"><p>Converts HSL values to hex representation of the colour.</p>
 729 <p class="header">Parameters
 730 </p>
 731 <dl class="dr-parameters"><dt class="dr-param">h</dt>
 732 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 733 <dd class="dr-description">hue</dd>
 734 <dt class="dr-param">s</dt>
 735 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 736 <dd class="dr-description">saturation</dd>
 737 <dt class="dr-param">l</dt>
 738 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 739 <dd class="dr-description">luminosity</dd>
 740 </dl>
 741 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
 742 </div><h3 id="Raphael.hsl2rgb" class="dr-method">Raphael.hsl2rgb(h, s, l)<a href="#Raphael.hsl2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L525">&#x27ad;</a></h3>
 743 <div class="dr-method"><p>Converts HSL values to RGB object.</p>
 744 <p class="header">Parameters
 745 </p>
 746 <dl class="dr-parameters"><dt class="dr-param">h</dt>
 747 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 748 <dd class="dr-description">hue</dd>
 749 <dt class="dr-param">s</dt>
 750 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 751 <dd class="dr-description">saturation</dd>
 752 <dt class="dr-param">l</dt>
 753 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 754 <dd class="dr-description">luminosity</dd>
 755 </dl>
 756 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
 757 <pre class="javascript code"><code>{
 758     r: <span class="c">// red,</span>
 759     g: <span class="c">// green,</span>
 760     b: <span class="c">// blue</span>
 761     hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
 762 }
 763 </code></pre>
 764 </div><h3 id="Raphael.is" class="dr-method">Raphael.is(o, type)<a href="#Raphael.is" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L273">&#x27ad;</a></h3>
 765 <div class="dr-method"><p>Handfull replacement for <code>typeof</code> operator.</p>
 766 <p class="header">Parameters
 767 </p>
 768 <dl class="dr-parameters"><dt class="dr-param">o</dt>
 769 <dd class="dr-type"><em class="dr-type-…">…</em></dd>
 770 <dd class="dr-description">any object or primitive</dd>
 771 <dt class="dr-param">type</dt>
 772 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 773 <dd class="dr-description">name of the type, i.e. “string”, “function”, “number”, etc.</dd>
 774 </dl>
 775 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description">is given value is of given type</span></p>
 776 </div><h3 id="Raphael.parsePathString" class="dr-method">Raphael.parsePathString(pathString)<a href="#Raphael.parsePathString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L835">&#x27ad;</a></h3>
 777 <div class="dr-method"><p>Utility methodParses given path string into an array of arrays of path segments.</p>
 778 <p class="header">Parameters
 779 </p>
 780 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
 781 <dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
 782 <dd class="dr-description">path string or array of segments (in the last case it will be returned stright away)</dd>
 783 </dl>
 784 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
 785 </div><h3 id="Raphael.parseTransformString" class="dr-method">Raphael.parseTransformString(TString)<a href="#Raphael.parseTransformString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L878">&#x27ad;</a></h3>
 786 <div class="dr-method"><p>Utility methodParses given path string into an array of transformations.</p>
 787 <p class="header">Parameters
 788 </p>
 789 <dl class="dr-parameters"><dt class="dr-param">TString</dt>
 790 <dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
 791 <dd class="dr-description">transform string or array of transformations (in the last case it will be returned stright away)</dd>
 792 </dl>
 793 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of transformations.</span></p>
 794 </div><h3 id="Raphael.path2curve" class="dr-method">Raphael.path2curve(pathString)<a href="#Raphael.path2curve" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1659">&#x27ad;</a></h3>
 795 <div class="dr-method"><p>Utility methodConverts path to path where all segments are cubic bezier curves.</p>
 796 <p class="header">Parameters
 797 </p>
 798 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
 799 <dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
 800 <dd class="dr-description">path string or array of segments</dd>
 801 </dl>
 802 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
 803 </div><h3 id="Raphael.pathToRelative" class="dr-method">Raphael.pathToRelative(pathString)<a href="#Raphael.pathToRelative" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1647">&#x27ad;</a></h3>
 804 <div class="dr-method"><p>Utility methodConverts path to relative form</p>
 805 <p class="header">Parameters
 806 </p>
 807 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
 808 <dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
 809 <dd class="dr-description">path string or array of segments</dd>
 810 </dl>
 811 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
 812 </div><h3 id="Raphael.rad" class="dr-method">Raphael.rad(deg)<a href="#Raphael.rad" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L319">&#x27ad;</a></h3>
 813 <div class="dr-method"><p>Transform angle to radians</p>
 814 <p class="header">Parameters
 815 </p>
 816 <dl class="dr-parameters"><dt class="dr-param">deg</dt>
 817 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 818 <dd class="dr-description">angle in degrees</dd>
 819 </dl>
 820 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in radians.</span></p>
 821 </div><h3 id="Raphael.rgb" class="dr-method">Raphael.rgb(r, g, b)<a href="#Raphael.rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L791">&#x27ad;</a></h3>
 822 <div class="dr-method"><p>Converts RGB values to hex representation of the colour.</p>
 823 <p class="header">Parameters
 824 </p>
 825 <dl class="dr-parameters"><dt class="dr-param">r</dt>
 826 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 827 <dd class="dr-description">red</dd>
 828 <dt class="dr-param">g</dt>
 829 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 830 <dd class="dr-description">green</dd>
 831 <dt class="dr-param">b</dt>
 832 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 833 <dd class="dr-description">blue</dd>
 834 </dl>
 835 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
 836 </div><h3 id="Raphael.rgb2hsb" class="dr-method">Raphael.rgb2hsb(r, g, b)<a href="#Raphael.rgb2hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L565">&#x27ad;</a></h3>
 837 <div class="dr-method"><p>Converts RGB values to HSB object.</p>
 838 <p class="header">Parameters
 839 </p>
 840 <dl class="dr-parameters"><dt class="dr-param">r</dt>
 841 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 842 <dd class="dr-description">red</dd>
 843 <dt class="dr-param">g</dt>
 844 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 845 <dd class="dr-description">green</dd>
 846 <dt class="dr-param">b</dt>
 847 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 848 <dd class="dr-description">blue</dd>
 849 </dl>
 850 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSB object in format:</span></p>
 851 <pre class="javascript code"><code>{
 852     h: <span class="c">// hue,</span>
 853     s: <span class="c">// saturation,</span>
 854     b: <span class="c">// brightness</span>
 855 }
 856 </code></pre>
 857 </div><h3 id="Raphael.rgb2hsl" class="dr-method">Raphael.rgb2hsl(r, g, b)<a href="#Raphael.rgb2hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L598">&#x27ad;</a></h3>
 858 <div class="dr-method"><p>Converts RGB values to HSL object.</p>
 859 <p class="header">Parameters
 860 </p>
 861 <dl class="dr-parameters"><dt class="dr-param">r</dt>
 862 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 863 <dd class="dr-description">red</dd>
 864 <dt class="dr-param">g</dt>
 865 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 866 <dd class="dr-description">green</dd>
 867 <dt class="dr-param">b</dt>
 868 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 869 <dd class="dr-description">blue</dd>
 870 </dl>
 871 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSL object in format:</span></p>
 872 <pre class="javascript code"><code>{
 873     h: <span class="c">// hue,</span>
 874     s: <span class="c">// saturation,</span>
 875     l: <span class="c">// luminosity</span>
 876 }
 877 </code></pre>
 878 </div><h3 id="Raphael.setWindow" class="dr-method">Raphael.setWindow(newwin)<a href="#Raphael.setWindow" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L383">&#x27ad;</a></h3>
 879 <div class="dr-method"><p>Used when you need to draw in <code>&lt;iframe></code>. Switched window to the iframe one.</p>
 880 <p class="header">Parameters
 881 </p>
 882 <dl class="dr-parameters"><dt class="dr-param">newwin</dt>
 883 <dd class="dr-type"><em class="dr-type-window">window</em></dd>
 884 <dd class="dr-description">new window object</dd>
 885 </dl>
 886 </div><h3 id="Raphael.snapTo" class="dr-method">Raphael.snapTo(values, value, [tolerance])<a href="#Raphael.snapTo" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L345">&#x27ad;</a></h3>
 887 <div class="dr-method"><p>Snaps given value to given grid.</p>
 888 <p class="header">Parameters
 889 </p>
 890 <dl class="dr-parameters"><dt class="dr-param">values</dt>
 891 <dd class="dr-type"><em class="dr-type-array">array</em> <em class="dr-type-number">number</em></dd>
 892 <dd class="dr-description">given array of values or step of the grid</dd>
 893 <dt class="dr-param">value</dt>
 894 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 895 <dd class="dr-description">value to adjust</dd>
 896 <dt class="dr-param optional">tolerance</dt>
 897 <dd class="dr-optional">optional</dd>
 898 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 899 <dd class="dr-description">tolerance for snapping. Default is <code>10</code>.</dd>
 900 </dl>
 901 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">adjusted value.</span></p>
 902 </div><h3 id="Raphael.svg" class="dr-property">Raphael.svg<a href="#Raphael.svg" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L226">&#x27ad;</a></h3>
 903 <div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports SVG.</p>
 904 </div><h3 id="Raphael.type" class="dr-property">Raphael.type<a href="#Raphael.type" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L208">&#x27ad;</a></h3>
 905 <div class="dr-property"><em class="dr-type dr-type-string">string</em><p>Can be “SVG”, “VML” or empty, depending on browser support.</p>
 906 </div><h3 id="Raphael.vml" class="dr-property">Raphael.vml<a href="#Raphael.vml" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L232">&#x27ad;</a></h3>
 907 <div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports VML.</p>
 908 </div></div></body></html>