javascript - RaphaelJs: Circle doesn't show proper value -

i have problem raphael library. i'm trying load image inside circle in 4 steps:

1 step = 25% of circle   2 step = 50% of circle   3 step = 75% of circle   4 step = 100% of circle  

if start step 2(50%) works fine, if start 25% image doesn't show proper. looks image out of circle. here live example, hope explain mean. http://jsfiddle.net/h4cjf/1/

var amount = 25;  var archtype = raphael("canvas", 350, 350); archtype.customattributes.arc = function (xloc, yloc, value, total, r) {     var alpha = 360 / total * value,          = (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({     "fill": "url(http://i.imgur.com/yr5gcbv.png)",     arc: [100, 100, amount, 100, 50] }).rotate(180);    function next_step() {;     amount = amount + 25;     my_arc.attr({         arc: [100, 100, amount, 100, 50]     }) };  var el = document.getelementbyid("more");       el.addeventlistener("click", next_step, false);  

image 100x100, radius 50px. fill circle image, without white space or reapeted background. help.

update: here how image:

if set amount 25 , click next step, circle looks this:

while should half of orginal image (red on top, yellow on bottom). think position start draw circle, can't figure out how fix problem.

ok strange little bug! incrementing of amount causing value exceed 100 - therefore code checks see if value @ total amount == total got ran first time:

start:   25 click 1: 50 click 2: 75 click 3: 100   <--only time got ran @ full click 4: 125 

to avoid this, add in mod line reduce number down , fixed:

function next_step() {     amount = amount % 100;   <--amount never exceed 100     amount = amount + 25;     my_arc.attr({         arc: [100, 100, amount, 100, 50]     }) }; 

the mod line needs above increment line, or turn full value of 100 0, , have same problem.