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");
r2.stroke("blue", 5);

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,
            "y": Math.random() * canvas.height
        });
    });
    
    this.fill = function(color) {
        _shape.attr("fill", color);
    }        
    
    this.stroke = function(color, width) {
        _shape.attr({
            "stroke": color,
            "stroke-width": width || 1
        });
    }
}