Does getPointAtLength svg work differently in different browsers?

Question

Does getPointAtLength svg work differently in different browsers?

I am working on an svg application. here the user can draw various shapes, such as rect, circle, line, etc. I need to convert these shapes to a “path”, and then I need all the points on the path.

My solution works fine for all shapes except the circle. When the user finishes drawing, I will convert the circle to a "path" using "arc". and when I try to find the waypoint using 'getPointAtLength', I get different values in different browsers. which changes the end result.

enter image description here

So far, "Opera" displays the best result. below is my code. I have three questions:

1) How can I fix this?

2) is there an alternative way to find all the points in the svg path?

3) ?

jsFiddle http://jsfiddle.net/xfpDA/

  <body>
        <script>
            function roundDecimalNumber(number, places) {
                        var place;
                        if (!places)
                                place = 3;
                        else
                                place = places;                        
                        number=parseFloat(number);                        
                        number = number.toFixed(place);
                        number = parseFloat(number);
                        return number;
                }

            function path2Array(node) {
                var pointsArray = new Array();
                var point,tx,ty,cordinatesXY;

                for (var i = 0; i < node.getTotalLength(); i+=0.2) {
                    point = node.getPointAtLength(i);
                     tx=roundDecimalNumber(point.x);
                     ty=roundDecimalNumber(point.y);                   
                     cordinatesXY = {
                        x: tx,
                        y: ty
                    };
                    pointsArray.push(cordinatesXY);
                }
                return pointsArray;
            }
        </script>

        <svg id="svg" width="800" height="600" viewBox="528 139 268 192">
        <path id="square" fill="none" stroke="blue" d="M 636.866, 216.994 a 25.490,29.18 0 1,0 50.981,0 a 25.490,29.180 0 1,0 -50.981,0 z"/>
        </svg>

        <script>
            var svg=document.getElementById('svg');
            var pathSquare=document.getElementById('square');            
            pathPoints=path2Array(pathSquare);
            var d='';
            var point;
            for(var i=0;i<pathPoints.length;i++){
                point=pathPoints[i];
                if(i===0)
                {
                    d='M '+point.x+','+point.y+' L ';                        
                }
                else{
                    d+=point.x+' '+point.y+' ';
                }
            }

        var dynamicSquare=document.createElementNS("http://www.w3.org/2000/svg", "path");
        dynamicSquare.setAttribute("d", d);
        dynamicSquare.setAttribute("fill", 'none');
        dynamicSquare.setAttribute("stroke",  'red');
        dynamicSquare.setAttribute("transform",  'matrix(1 0 0 1 100 0)');
        svg.appendChild(dynamicSquare);
        </script>
</body>