Raphael :: Basic Demo

A simple demo of raphael.js just to get started.

by downedcrane

HTML

<div id="the_canvas"></div>

CSS

body { padding:10px; background-color:#eee; }
#the_canvas { background-color: white; width:250px; height:250px; }

JavaScript

/*
 * Simple Raphael Example
 * http://jsfiddle.net/user/klenwell/fiddles/
 *
 * References:
 *   http://raphaeljs.com/
 */

// Identifies canvas element and sets some globals
var canvas = document.getElementById("the_canvas");
var c = {
    width: canvas.offsetWidth,
    height: canvas.offsetHeight,
    center: {x: canvas.offsetWidth/2, y: canvas.offsetHeight/2} 
};
console.log(c);

// Creates Raphael canvas on canvas element
var paper = Raphael(canvas, c.width, c.height);

// Creates background for paper
var paper_bg = paper.rect(0, 0, c.width, c.height);
paper_bg.attr("stroke-width", 4).attr("stroke", "lightgray");

// Creates circle at x = 100, y = 100, with radius 20
var circle = paper.circle(c.center.x, c.center.y, 20);

// Sets circle attributes
circle.attr("fill", "blue");
circle.attr("stroke-width", 4);
circle.attr("stroke", "lightblue");