Raphael: How to center circle inside div

Question

I want to create cricle in center of div. Here is my http://jsfiddle.net/uuAjV/3/ If I set amount to 75, it will display correct position of circle, but if I change variable amount to less then 75, then position of circle starts in weird places.
Here is my code

var amount = 75;
var archtype = Raphael("canvas", 500, 500);
archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
    var alpha = 360 / total * value, 
        a = (90 - alpha) * Math.PI / 180,
        x = xloc + R * Math.cos(a),
        y = yloc - R * Math.sin(a),
        path;
    if (total == value) {
        path = [
            ["M", xloc, yloc - R],
            ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
        ];
    } else {
        path = [
            ["M", xloc, yloc - R],
            ["A", R, R, 0, +(alpha > 180), 1, x, y]
        ];
    }
    return {
        path: path
    };
};


var my_arc = archtype.path().attr({
    "stroke": "#f00",
    "stroke-width": 2,
    arc: [100, 100, amount, 100, 100]
}).rotate(180);

I have tried change:

["M", xloc, yloc - R],

to:

["M", 100, 200],

So it would start from bottom od div, but it didn't work

Any help how to fix it? I want to have circle always in middle of div. For example: this is how is should look if amount is set to 25.

Thanks in advance!

Answer 1

I suspect what you're wanting to achieve can be obtained by changing the rotate to rotate(180, 100, 100) so that you're rotating about the centre rather than some other point. Ie

var my_arc = archtype.path().attr({
    "stroke": "#f00",
    "stroke-width": 2,
    arc: [100, 100, amount, 100, 100]
}).rotate(180, 100, 100);