Circle coordinates - another doubt

Hi All, 

See the below example, 

I have a box and circle class, both x, y are same but the
drawing is not correct. 

Why is this ? Any help ?

Regards,
Muthu 

<?xml version="1.0" encoding="UTF-8"
?>
<canvas width="800" height="800"
debug="true" >	
    <class name="circle"
extends="drawview" >
        <attribute name="circlecolor"
value="white"/>
        <attribute name="r"
value="100"/>
        <method event="oninit">
          this.redraw();
        </method>
        <method event="onr">
          this.redraw();
        </method>
        <method name="redraw" ><![CDATA[
            this.clear();
            this.beginPath();
            this.moveTo(x+r, y);
            var a = Math.tan(22.5 * Math.PI/180);
            for (var angle = 45; angle<=360; angle += 45)
{
                // endpoint:
                var endx = r*Math.cos(angle*Math.PI/180);
                var endy = r*Math.sin(angle*Math.PI/180);
                // control:
                // (angle-90 is used to give the correct
sign)
                var cx =endx +
r*a*Math.cos((angle-90)*Math.PI/180);
                var cy =endy +
r*a*Math.sin((angle-90)*Math.PI/180);
                this.quadraticCurveTo(cx+x, cy+y, endx+x,
endy+y);
            }
          
            var g = this.createLinearGradient(0, 0, 8, x+r,
y+r, 0)
            this.globalAlpha = 1;
            g.addColorStop(0, 0xffffff);
            this.globalAlpha = 0;
            g.addColorStop(1, this.circlecolor);
            this.fillStyle = g;
            this.fill()
            this.globalAlpha = 1;
            this.linewidth= 5;
            this.stroke();
        ]]>
        </method>
    </class>    
	<class name="box"
extends="drawview">
	<animator name="myAnimator"
attribute="opacity"  to="1"
duration="1000" start="true"/>
		<handler name="oninit">
			
		</handler>
		<method name="setNewHeight" ><![CDATA[
		]]>
		</method>
	</class>    
    
	<box x="20" y="0"
width="30" height="35"
bgcolor="blue" opacity=".5"
name="b1"/> 
	<circle r="5" x="20" y="0"
circlecolor="blue"/>
	<!--
	<box x="60" y="0"
width="30" height="35"
bgcolor="blue" opacity=".5"
name="b2"/>
	<box x="100" y="0"
width="30" height="35"
bgcolor="blue" opacity=".5"
name="b3"/>
	<box x="140" y="0"
width="30" height="35"
bgcolor="blue" opacity=".5"
name="b4"/>
	<box x="15" y="35"
width="230" height="50"
bgcolor="blue" opacity=".5"
name="b5"/>
	<box x="20" y="85"
width="18" height="75"
bgcolor="blue" opacity=".5"
name="b6"/>
	<box x="60" y="135"
width="100" height="75"
bgcolor="blue" opacity=".5"
name="b7"/>
	-->
	
</canvas>