Raphael Js - learning 01

by Susan Delgado

HTML

<div id="canvas_container"></div>

CSS

#canvas_container {
      width: 500px;
      border: 1px solid #aaa;
  }

JavaScript

//http://code.tutsplus.com/tutorials/an-introduction-to-the-raphael-js-library--net-7186
//==================================
//Creating our Drawing Canvas
//==================================
/*  var paper = new Raphael(x,y,width,height)
    the absolute position of the canvas relative to the viewport
    var paper = new Raphael(element, width, height)
    an element 'container' that the canvas is drawn inside */

windows.onload = function () {
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500;
    //Built-in Shapes
    var circle = paper.circle(100, 100, 80);
    //draw a circle with a radious of 80, x center at 100 and y center at 100

    //draw multiple circles with out referencing them
    for (var i = 0; i < 5; i += 1) {
        var multiplier = i * 5;
        paper.circle(250 + (2 * multiplier), 100 + multiplier, 50 - multiplier);
    }
}