Raphael - test

by djatha

HTML

<figure id="canvas"></figure>

CSS

svg {
    border: 1px solid dimgray;
    padding: 5px;
}

JavaScript

var canvas_id = "canvas",
    width = 500,
    height = 500,
    canvas = Raphael(canvas_id, width, height);

var r1 = new Shape(canvas, 10, 45),
    r2 = new Shape(canvas, 50, 145);

r1.fill("red");

function Shape (canvas, x, y) {
    var width = 100,
        height = 50,
        _shape = canvas.rect(x, y, width, height);
    
    _shape.dblclick(function(event) {
        _shape.attr("x", Math.random() * canvas.width);
    });
    
    this.fill = function(color) {
        _shape.attr("fill", color);
    }        
}