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

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2    "http://www.w3.org/TR/html4/strict.dtd">
   3 <html lang="en">
   4     <head>
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6         <title>Raphaël Reference</title>
   7         <meta name="author" content="Dmitry Baranovskiy">
   8         <meta name="description" content="Vector Graphics JavaScript™ Library">
   9         <link rel="stylesheet" href="raphael.css" type="text/css" charset="utf-8" media="screen,projection">
  10         <link rel="stylesheet" type="text/css" media="print" href="/dmitry-print.css">
  11         <link rel="shortcut icon" href="/favicon16.png" type="image/x-icon">
  12         <link rel="apple-touch-icon" href="/favicon.png">
  13         <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
  14         <script src="../dmitry.js" type="text/javascript" charset="utf-8"></script>
  15     </head>
  16     <body class="raphael" id="raphael.dmitry.baranovskiy.com">
  17         <div id="header">
  18             <a href="http://twitter.com/statuses/user_timeline/17180567.atom" id="rss" name="rss">rss</a>
  19             <h1>
  20                 Raphaël—JavaScript Library
  21             </h1>
  22         </div>
  23         <div id="content">
  24             <div>
  25                 <div>
  26                     <div id="column-1">
  27                         <h2>Main Function</h2>
  28                         <h3 id="Raphael">
  29                             Raphael
  30                         </h3>
  31                         <p>
  32                             Creates a canvas object on which to draw. You must do this first, as all future calls to drawing methods from this instance will be bound to this canvas.
  33                         </p>
  34                         <h4>Parameters</h4>
  35                         <ol>
  36                             <li>container <em>HTMLElement</em> or <em>string</em></li>
  37                             <li>width <em>number</em></li>
  38                             <li>height <em>number</em></li>
  39                         </ol>
  40                         <p>or</p>
  41                         <ol>
  42                             <li>x <em>number</em></li>
  43                             <li>y <em>number</em></li>
  44                             <li>width <em>number</em></li>
  45                             <li>height <em>number</em></li>
  46                         </ol>
  47                         <h4>Usage</h4>
  48                         <pre class="javascript code"><code>// Each of the following examples create a canvas that is 320px wide by 200px high
  49 // Canvas is created at the viewport's 10,50 coordinate
  50 var paper = Raphael(10, 50, 320, 200);
  51 // Canvas is created at the top left corner of the #notepad element (or its top right corner in dir="rtl" elements)
  52 var paper = Raphael(document.getElementById("notepad"), 320, 200);
  53 // Same as above
  54 var paper = Raphael("notepad", 320, 200);</code></pre>
  55                         <h2 id="Element">
  56                             Element’s generic methods
  57                         </h2>
  58                         <p>
  59                             Each object created on the canvas shares these same generic methods:
  60                         </p>
  61                         <h3 id="node">
  62                             node
  63                         </h3>
  64                         <p>
  65                             Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
  66                         </p>
  67                         <h4>Usage</h4>
  68                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10); // draw a circle at coordinate 10,10 with radius of 10
  69 c.node.onclick = function () { c.attr("fill", "red"); };</code></pre>
  70                         <h3 id="remove">
  71                             remove
  72                         </h3>
  73                         <p>
  74                             Removes element from the DOM. You can’t use it after this method call.
  75                         </p>
  76                         <h4>Usage</h4>
  77                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
  78 c.remove();</code></pre>
  79                         <h3 id="hide">
  80                             hide
  81                         </h3>
  82                         <p>
  83                             Makes element invisible.
  84                         </p>
  85                         <h4>Usage</h4>
  86                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
  87 c.hide();</code></pre>
  88                         <h3 id="show">
  89                             show
  90                         </h3>
  91                         <p>
  92                             Makes element visible.
  93                         </p>
  94                         <h4>Usage</h4>
  95                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
  96 c.show();</code></pre>
  97                         <h3 id="rotate">
  98                             rotate
  99                         </h3>
 100                         <p>
 101                             Rotates the element by the given degree from its center point.
 102                         </p>
 103                         <h4>Parameters</h4>
 104                         <ol>
 105                             <li>degree <em>number</em> Degree of rotation (0 – 360°)</li>
 106                             <li>isAbsolute <em>boolean</em> [optional] Specifies is degree is relative to previous position (<code>false</code>) or is it absolute angle (<code>true</code>)</li>
 107                         </ol>
 108                         <h4>Usage</h4>
 109                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
 110 c.rotate(45);        // rotation is relative
 111 c.rotate(45, true);  // rotation is absolute</code></pre>
 112                         <h3 id="translate">
 113                             translate
 114                         </h3>
 115                         <p>
 116                             Moves the element around the canvas by the given distances.
 117                         </p>
 118                         <h4>Parameters</h4>
 119                         <ol>
 120                             <li>dx <em>number</em> Pixels of translation by X axis</li>
 121                             <li>dy <em>number</em> Pixels of translation by Y axis</li>
 122                         </ol>
 123                         <h4>Usage</h4>
 124                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
 125 c.translate(10, 10); // moves the circle down the canvas, in a diagonal line</code></pre>
 126                         <h3 id="scale">
 127                             scale
 128                         </h3>
 129                         <p>
 130                             Resizes the element by the given multiplier.
 131                         </p>
 132                         <h4>Parameters</h4>
 133                         <ol>
 134                             <li>Xtimes <em>number</em> Amount to scale horizontally</li>
 135                             <li>Ytimes <em>number</em> Amount to scale vertically</li>
 136                         </ol>
 137                         <h4>Usage</h4>
 138                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
 139 c.scale(1.5, 1.5); // makes the circle 1.5 times larger
 140 c.scale(.5, .75);  // makes the circle half as wide, and 75% as high</code></pre>
 141                         <h3 id="attr">
 142                             attr
 143                         </h3>
 144                         <p>
 145                             Sets the attributes of elements directly.
 146                         </p>
 147                         <h4>Parameters</h4>
 148                         <ol>
 149                             <li>attributeName <em>string</em></li>
 150                             <li>value <em>string</em></li>
 151                         </ol>
 152                         <p>or</p>
 153                         <ol>
 154                             <li>params <em>object</em></li>
 155                         </ol>
 156                         <p>or</p>
 157                         <ol>
 158                             <li>attributeName <em>string</em> in this case method returns current value for given attribute name</li>
 159                         </ol>
 160                         <p>or</p>
 161                         <ol>
 162                             <li>attributeNames <em>array</em> in this case method returns array of current values for given attribute names</li>
 163                         </ol>
 164                         <h4>Possible parameters</h4>
 165                         <p>Please refer to the <a href="http://www.w3.org/TR/SVG/" title="The W3C Recommendation for the SVG language describes these properties in detail.">SVG specification</a> for an explanation of these parameters.</p>
 166                         <ul>
 167                             <li>cx <em>number</em></li>
 168                             <li>cy <em>number</em></li>
 169                             <li>fill <em>colour</em></li>
 170                             <li>fill-opacity <em>number</em></li>
 171                             <li>font <em>string</em></li>
 172                             <li>font-family <em>string</em></li>
 173                             <li>font-size <em>number</em></li>
 174                             <li>font-weight <em>string</em></li>
 175                             <li>gradient <em>object</em></li>
 176                             <li>height <em>number</em></li>
 177                             <li>opacity <em>number</em></li>
 178                             <li>path <em>pathString</em></li>
 179                             <li>r <em>number</em></li>
 180                             <li>rotation <em>number</em></li>
 181                             <li>rx <em>number</em></li>
 182                             <li>ry <em>number</em></li>
 183                             <li>scale <em>CSV</em></li>
 184                             <li>stroke <em>colour</em></li>
 185                             <li>stroke-dasharray <em>string</em> [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]</li>
 186                             <li>stroke-linecap <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
 187                             <li>stroke-linejoin <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
 188                             <li>stroke-miterlimit <em>number</em></li>
 189                             <li>stroke-opacity <em>number</em></li>
 190                             <li>stroke-width <em>number</em></li>
 191                             <li>translation <em>CSV</em></li>
 192                             <li>width <em>number</em></li>
 193                             <li>x <em>number</em></li>
 194                             <li>y <em>number</em></li>
 195                         </ul>
 196                         <h4>Usage</h4>
 197                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
 198 c.attr("fill", "black");                              // using strings
 199 c.attr({fill: "#000", stroke: "#f00", opacity: 0.5}); // using params object</code></pre>
 200                         <h3 id="animate">
 201                             animate
 202                         </h3>
 203                         <p>
 204                             Linearly changes an attribute from its current value to its specified value in the given amount of milliseconds.
 205                         </p>
 206                         <h4>Parameters</h4>
 207                         <ol>
 208                             <li>newAttrs <em>object</em> A parameters object of the animation results. (Not all attributes can be animated.)</li>
 209                             <li>ms <em>number</em> The duration of the animation, given in milliseconds.</li>
 210                             <li>callback <em>function</em> [optional]</li>
 211                         </ol>
 212                         <h4>Attributes that can be animated</h4>
 213                         <p>The <code>newAttrs</code> parameter accepts an object whose properties are the attributes to animate. However, not all attributes listed in the <code>attr</code> method reference can be animated. The following is a list of those properties that can be animated:</p>
 214                         <ul>
 215                             <li>cx <em>number</em></li>
 216                             <li>cy <em>number</em></li>
 217                             <li>fill <em>colour</em></li>
 218                             <li>fill-opacity <em>number</em></li>
 219                             <li>font-size <em>number</em></li>
 220                             <li>height <em>number</em></li>
 221                             <li>opacity <em>number</em></li>
 222                             <li>path <em>pathString</em></li>
 223                             <li>r <em>number</em></li>
 224                             <li>rotation <em>number</em></li>
 225                             <li>rx <em>number</em></li>
 226                             <li>ry <em>number</em></li>
 227                             <li>scale <em>CSV</em></li>
 228                             <li>stroke <em>colour</em></li>
 229                             <li>stroke-opacity <em>number</em></li>
 230                             <li>stroke-width <em>number</em></li>
 231                             <li>translation <em>CSV</em></li>
 232                             <li>width <em>number</em></li>
 233                             <li>x <em>number</em></li>
 234                             <li>y <em>number</em></li>
 235                         </ul>
 236                         <h4>Usage</h4>
 237                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 238 <code>c.animate({cx: 20, r: 20}, 2000);</code></pre>
 239                         <h3 id="getBBox">
 240                             getBBox
 241                         </h3>
 242                         <p>
 243                             Returns the dimensions of an element.
 244                         </p>
 245                         <h4>Usage</h4>
 246                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 247 <code>var width = c.getBBox().width;</code></pre>
 248                         <h3 id="toFront">
 249                             toFront
 250                         </h3>
 251                         <p>
 252                             Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
 253                         </p>
 254                         <h4>Usage</h4>
 255                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 256 <code>c.toFront();</code></pre>
 257                         <h3 id="toBack">
 258                             toBack
 259                         </h3>
 260                         <p>
 261                             Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
 262                         </p>
 263                         <h4>Usage</h4>
 264                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 265 <code>c.toBack();</code></pre>
 266                         <h3 id="insertBefore">
 267                             insertBefore
 268                         </h3>
 269                         <p>
 270                             Inserts current object before the given one.
 271                         </p>
 272                         <h4>Usage</h4>
 273                         <pre class="javascript code"><code>var r = paper.rect(10, 10, 10, 10);</code>
 274 <code>var c = paper.circle(10, 10, 10);</code>
 275 <code>c.insertBefore(r);</code></pre>
 276                         <h3 id="insertAfter">
 277                             insertAfter
 278                         </h3>
 279                         <p>
 280                             Inserts current object after the given one
 281                         </p>
 282                         <h4>Usage</h4>
 283                         <pre class="javascript code"><code>var r = paper.rect(10, 10, 10, 10);</code>
 284 <code>var c = paper.circle(10, 10, 10);</code>
 285 <code>r.insertAfter(c);</code></pre>
 286                         <h2>Graphic Primitives</h2>
 287                         <h3 id="circle">
 288                             circle
 289                         </h3>
 290                         <p>
 291                             Draws a circle.
 292                         </p>
 293                         <h4>Parameters</h4>
 294                         <ol>
 295                             <li>x <em>number</em> X coordinate of the centre</li>
 296                             <li>y <em>number</em> Y coordinate of the centre</li>
 297                             <li>r <em>number</em> radius</li>
 298                         </ol>
 299                         <h4>Usage</h4>
 300                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code></pre>
 301                         <h3 id="rect">
 302                             rect
 303                         </h3>
 304                         <p>
 305                             Draws a rectangle.
 306                         </p>
 307                         <h4>Parameters</h4>
 308                         <ol>
 309                             <li>x <em>number</em> X coordinate of top left corner</li>
 310                             <li>y <em>number</em> Y coordinate of top left corner</li>
 311                             <li>width <em>number</em></li>
 312                             <li>height <em>number</em></li>
 313                             <li>r <em>number</em> [optional] radius for rounded corners, default is 0</li>
 314                         </ol>
 315                         <h4>Usage</h4>
 316                         <pre class="javascript code"><code>// regular rectangle</code>
 317 <code>var c = paper.rect(10, 10, 10, 10);</code>
 318 <code>// rectangle with rounded corners</code>
 319 <code>var c = paper.rect(10, 10, 100, 50, 10);</code></pre>
 320                         <h3 id="ellipse">
 321                             ellipse
 322                         </h3>
 323                         <p>
 324                             Draws an ellipse.
 325                         </p>
 326                         <h4>Parameters</h4>
 327                         <ol>
 328                             <li>x <em>number</em> X coordinate of the centre</li>
 329                             <li>y <em>number</em> X coordinate of the centre</li>
 330                             <li>rx <em>number</em> Horisontal radius</li>
 331                             <li>ry <em>number</em> Vertical radius</li>
 332                         </ol>
 333                         <h4>Usage</h4>
 334                         <pre class="javascript code"><code>var c = paper.ellipse(100, 100, 30, 40);</code></pre>
 335                         <h3 id="image">
 336                             image
 337                         </h3>
 338                         <p>
 339                             Embeds an image into the SVG/VML canvas.
 340                         </p>
 341                         <h4>Parameters</h4>
 342                         <ol>
 343                             <li>src <em>string</em> URI of the source image</li>
 344                             <li>x <em>number</em> X coordinate position</li>
 345                             <li>y <em>number</em> Y coordinate position</li>
 346                             <li>width <em>number</em> Width of the image</li>
 347                             <li>height <em>number</em> Height of the image</li>
 348                         </ol>
 349                         <h4>Usage</h4>
 350                         <pre class="javascript code"><code>var c = paper.image("apple.png", 10, 10, 100, 100);</code></pre>
 351                         <h3 id="text">
 352                             text
 353                         </h3>
 354                         <p>
 355                             Draws a text string.
 356                         </p>
 357                         <h4>Parameters</h4>
 358                         <ol>
 359                             <li>x <em>number</em> X coordinate position.</li>
 360                             <li>y <em>number</em> Y coordinate position.</li>
 361                             <li>text <em>string</em> The text string to draw.</li>
 362                         </ol>
 363                         <h4>Usage</h4>
 364                         <pre class="javascript code"><code>var t = paper.text(10, 10, "Look mom, I'm scalable!");</code></pre>
 365                         <h3 id="path">
 366                             path
 367                         </h3>
 368                         <p>
 369                             Initialises path drawing. Typically, this function returns an empty <code>path</code> object and to draw paths you use its built-in methods like <code>lineTo</code> and <code>curveTo</code>. However, you can also specify a path literally by supplying the path data as a second argument.
 370                         </p>
 371                         <h4>Parameters</h4>
 372                         <ol>
 373                             <li>params <em>object</em> Attributes for the resulting path as described in the <code><a href="#attr">attr</a></code> reference.</li>
 374                             <li>pathString <em>string</em> [optional] Path data in <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a>.</li>
 375                         </ol>
 376                         <h4>Usage</h4>
 377                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50); // draw a diagonal line
 378 var c = paper.path({stroke: "#036"}, "M 10 10 L 50 50");            // same</code></pre>
 379                         <h2>Path Methods</h2>
 380                         <h3 id="absolutely">
 381                             absolutely
 382                         </h3>
 383                         <p>
 384                             Sets a trigger to count all following units as absolute ones, unless said otherwise. (This is on by default.)
 385                         </p>
 386                         <h4>Usage</h4>
 387                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).absolutely()
 388     .moveTo(10, 10).lineTo(50, 50);</code></pre>
 389                         <h3 id="relatively">
 390                             relatively
 391                         </h3>
 392                         <p>
 393                             Sets a trigger to count all following units as relative ones, unless said otherwise.
 394                         </p>
 395                         <h4>Usage</h4>
 396                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).relatively()
 397     .moveTo(10, 10).lineTo(50, 50);</code></pre>
 398                         <h3 id="moveTo">
 399                             moveTo
 400                         </h3>
 401                         <p>
 402                             Moves the drawing point to the given coordinates.
 403                         </p>
 404                         <h4>Parameters</h4>
 405                         <ol>
 406                             <li>x <em>number</em> X coordinate</li>
 407                             <li>y <em>number</em> Y coordinate</li>
 408                         </ol>
 409                         <h4>Usage</h4>
 410                         <pre class="javascript code"><code>// Begins drawing the path at coordinate 10,10
 411 var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
 412                         <h3 id="lineTo">
 413                             lineTo
 414                         </h3>
 415                         <p>
 416                             Draws a straight line to the given coordinates.
 417                         </p>
 418                         <h4>Parameters</h4>
 419                         <ol>
 420                             <li>x <em>number</em> X coordinate</li>
 421                             <li>y <em>number</em> Y coordinate</li>
 422                         </ol>
 423                         <h4>Usage</h4>
 424                         <pre class="javascript code"><code>// Draws a line starting from 10,10 to 50,50
 425 var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
 426                         <h3 id="cplineTo">
 427                             cplineTo
 428                         </h3>
 429                         <p>
 430                             Draws a curved line to the given coordinates. The line will have horizontal anchors on start and on finish.
 431                         </p>
 432                         <h4>Parameters</h4>
 433                         <ol>
 434                             <li>x <em>number</em></li>
 435                             <li>y <em>number</em></li>
 436                             <li>width <em>number</em></li>
 437                         </ol>
 438                         <h4>Usage</h4>
 439                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);</code></pre>
 440                         <h3 id="curveTo">
 441                             curveTo
 442                         </h3>
 443                         <p>
 444                             Draws a bicubic curve to the given coordinates.
 445                         </p>
 446                         <h4>Parameters</h4>
 447                         <ol>
 448                             <li>x1 <em>number</em></li>
 449                             <li>y1 <em>number</em></li>
 450                             <li>x2 <em>number</em></li>
 451                             <li>y2 <em>number</em></li>
 452                             <li>x3 <em>number</em></li>
 453                             <li>y3 <em>number</em></li>
 454                         </ol>
 455                         <h4>Usage</h4>
 456                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);</code></pre>
 457                         <h3 id="qcurveTo">
 458                             qcurveTo
 459                         </h3>
 460                         <p>
 461                             Draws a quadratic curve to the given coordinates.
 462                         </p>
 463                         <h4>Parameters</h4>
 464                         <ol>
 465                             <li>x1 <em>number</em></li>
 466                             <li>y1 <em>number</em></li>
 467                             <li>x2 <em>number</em></li>
 468                             <li>y2 <em>number</em></li>
 469                         </ol>
 470                         <h4>Usage</h4>
 471                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);</code></pre>
 472                         <h3 id="addRoundedCorner">
 473                             addRoundedCorner
 474                         </h3>
 475                         <p>
 476                             Draws a quarter of a circle from the current drawing point.
 477                         </p>
 478                         <h4>Parameters</h4>
 479                         <ol>
 480                             <li>r <em>number</em></li>
 481                             <li>dir <em>string</em> Two-letter directional instruction, as described below.</li>
 482                         </ol>
 483                         <h4>Possible <code>dir</code> values</h4>
 484                         <dl>
 485                             <dt>lu</dt>
 486                             <dd>left up</dd>
 487                             <dt>ld</dt>
 488                             <dd>left down</dd>
 489                             <dt>ru</dt>
 490                             <dd>right up</dd>
 491                             <dt>rd</dt>
 492                             <dd>right down</dd>
 493                             <dt>ur</dt>
 494                             <dd>up right</dd>
 495                             <dt>ul</dt>
 496                             <dd>up left</dd>
 497                             <dt>dr</dt>
 498                             <dd>down right</dd>
 499                             <dt>dl</dt>
 500                             <dd>down left</dd>
 501                         </dl>
 502                         <h4>Usage</h4>
 503                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).addRoundedCorner(10, "rd");</code></pre>
 504                         <h3 id="andClose">
 505                             andClose
 506                         </h3>
 507                         <p>
 508                             Closes the path being drawn.
 509                         </p>
 510                         <h4>Usage</h4>
 511                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();</code></pre>
 512                         <h3 id="getColor">
 513                             getColor
 514                         </h3>
 515                         <p>
 516                             Returns a colour object for the next colour in spectrum
 517                         </p>
 518                         <h4>Parameters</h4>
 519                         <ol>
 520                             <li>value <em>number</em> brightness [optional]</li>
 521                         </ol>
 522                         <h4>Usage</h4>
 523                         <pre class="javascript code"><code>var c = paper.path({stroke: Raphael.getColor()}, "M10,10L100,100")</code></pre>
 524                         <h3 id="getColor-reset">
 525                             getColor.reset
 526                         </h3>
 527                         <p>
 528                             Resets getColor function, so it will start from the beginning
 529                         </p>
 530                     </div>
 531                     <div id="column-2">
 532                         <h2>
 533                             <a href="index.html">Home</a>
 534                         </h2>
 535                         <h2>
 536                             Contents
 537                         </h2>
 538                         <ul id="contents">
 539                             <li>
 540                                 <a href="reference.html#Raphael"><code>Raphael</code></a>
 541                             </li>
 542                             <li>
 543                                 <a href="reference.html#node"><code>node</code></a>
 544                             </li>
 545                             <li>
 546                                 <a href="reference.html#remove"><code>remove</code></a>
 547                             </li>
 548                             <li>
 549                                 <a href="reference.html#hide"><code>hide</code></a>
 550                             </li>
 551                             <li>
 552                                 <a href="reference.html#show"><code>show</code></a>
 553                             </li>
 554                             <li>
 555                                 <a href="reference.html#rotate"><code>rotate</code></a>
 556                             </li>
 557                             <li>
 558                                 <a href="reference.html#translate"><code>translate</code></a>
 559                             </li>
 560                             <li>
 561                                 <a href="reference.html#scale"><code>scale</code></a>
 562                             </li>
 563                             <li>
 564                                 <a href="reference.html#attr"><code>attr</code></a>
 565                             </li>
 566                             <li>
 567                                 <a href="reference.html#animate"><code>animate</code></a>
 568                             </li>
 569                             <li>
 570                                 <a href="reference.html#getBBox"><code>getBBox</code></a>
 571                             </li>
 572                             <li>
 573                                 <a href="reference.html#toFront"><code>toFront</code></a>
 574                             </li>
 575                             <li>
 576                                 <a href="reference.html#toBack"><code>toBack</code></a>
 577                             </li>
 578                             <li>
 579                                 <a href="reference.html#circle"><code>circle</code></a>
 580                             </li>
 581                             <li>
 582                                 <a href="reference.html#rect"><code>rect</code></a>
 583                             </li>
 584                             <li>
 585                                 <a href="reference.html#ellipse"><code>ellipse</code></a>
 586                             </li>
 587                             <li>
 588                                 <a href="reference.html#image"><code>image</code></a>
 589                             </li>
 590                             <li>
 591                                 <a href="reference.html#path"><code>path</code></a>
 592                                 <ul>
 593                                     <li>
 594                                         <a href="reference.html#absolutely"><code>absolutely</code></a>
 595                                     </li>
 596                                     <li>
 597                                         <a href="reference.html#relatively"><code>relatively</code></a>
 598                                     </li>
 599                                     <li>
 600                                         <a href="reference.html#moveTo"><code>moveTo</code></a>
 601                                     </li>
 602                                     <li>
 603                                         <a href="reference.html#lineTo"><code>lineTo</code></a>
 604                                     </li>
 605                                     <li>
 606                                         <a href="reference.html#cplineTo"><code>cplineTo</code></a>
 607                                     </li>
 608                                     <li>
 609                                         <a href="reference.html#curveTo"><code>curveTo</code></a>
 610                                     </li>
 611                                     <li>
 612                                         <a href="reference.html#qcurveTo"><code>qcurveTo</code></a>
 613                                     </li>
 614                                     <li>
 615                                         <a href="reference.html#addRoundedCorner"><code>addRoundedCorner</code></a>
 616                                     </li>
 617                                     <li>
 618                                         <a href="reference.html#andClose"><code>andClose</code></a>
 619                                     </li>
 620                                 </ul>
 621                             </li>
 622                             <li>
 623                                 <a href="#getColor"><code>getColor</code></a>
 624                             </li>
 625                             <li>
 626                                 <a href="#getColor-reset"><code>getColor.reset</code></a>
 627                             </li>
 628                         </ul>
 629                     </div>
 630                     <div  id="footer">
 631                         <h3 id="copyright">
 632                             <a href="http://creativecommons.org/licenses/by-sa/3.0/" title="Creative Commons Attribution-ShareAlike 3.0 Unported" rel="license">Some Rights Reserved</a> by <a href="http://dmitry.baranovskiy.com/">Dmitry Baranovskiy</a>
 633                         </h3>
 634                         <h3 id="font">
 635                             Font by <a href="http://www.exljbris.nl">Jos Buivenga</a> · Logo by <a href="http://wasabicube.com/">Wasabicube</a> ·
 636                             Work at this project started as 20% time at <a href="http://www.atlassian.com/" title="Atlassian — Software to Track, Test &#38; Collaborate, from Enterprises to Open Source Projects.">Atlassian</a>
 637                         </h3>
 638                     </div>
 639                 </div>
 640             </div>
 641         </div>
 642         <script type="text/javascript">
 643         var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 644         document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 645         </script>
 646         <script type="text/javascript">
 647         var pageTracker = _gat._getTracker("UA-616618-3");
 648         pageTracker._trackPageview();
 649         </script>
 650     </body>
 651 </html>