javascript - creating a circle of bars with HTML5 canvas, but the space between bars is uneven -

i'm trying create circular progressbar(though wouldn't bar anymore, it?). around cricle there thin bars perpendicular circle. problem is, code doesn't generate there bars in spacing. here's code , image of result:

function mh5pb(canvasid,            //the id of canvas draw pb on                 value,              //a float value, representing progress(ex: 0.3444)                 background,         //the background color of pb(ex: "#ffffff")                 circlebackground,   //the background color of bars in circles                 integercolor,       //the color of outer circle(or int circle)                 floatcolor          //the color of inner circle(or float circle)                 ) {     var canvas = document.getelementbyid(canvasid);     var context = canvas.getcontext("2d");     var canvaswidth = canvas.width;     var canvasheight = canvas.height;     var radius = math.min(canvaswidth, canvasheight) / 2;     var numberofbars = 72;     var barthickness = 2;      //margin borders, , space between 2 circles     var margin = parseint(radius / 12.5) >= 2 ? parseint(radius / 12.5) : 2;       //the thickness of int circle , float circle     var circlethickness = parseint((radius / 5) * 2);      //the outer radius of int circle     var intouterradius = radius - margin;     //the inner radius of int circle     var intinnerradius = radius - margin - circlethickness;      //the outer radius of float circle     var floatouterradius = intouterradius - margin - circlethickness;     //the inner radius of float circle     var floatinnerradius = floatouterradius - circlethickness;      //draw bar, each degreestep degrees     var intcircledegreestep = 5;                                     // ((2 * math.pi * intouterradius) / (barthickness + 10)) //                                     //  area total number of required bars  //                                     //  fill intcircle.1px space between each bar//     var floatcircledegreestep = 360 / ((2 * math.pi * floatouterradius) / (barthickness + 10));              context.linewidth = barthickness;     context.strokestyle = circlebackground;     //draw bg of outer circle     for(i = 90; < 450; i+=intcircledegreestep)     {         //since want start top, , move cw, have map degree         //in loop         cxouter = math.floor(intouterradius * math.cos(i) + radius);         cyouter = math.floor(intouterradius * math.sin(i) + radius);         cxinner = math.floor(intinnerradius * math.cos(i) + radius);         cyinner = math.floor(intinnerradius * math.sin(i) + radius);         context.moveto(cxouter, cyouter);         context.lineto(cxinner, cyinner);         context.stroke();     } } 

edit: oh, , lines aren't anti-aliased. know why? should explain progressbar consists of 2 parts. outer circle (visible in provided image) , inner circle. outer circle amount of integer part of percentage (i.e. 45 in 45.98%) , inner circle amount of not integer part of percentage (i.e. 98 in 45.98%). hence know intcircle , floatcircle :)

it appears passing degrees math.sin , math.cos. these functions expect radians. example,

// degrees radians. math.sin(i * (math.pi / 180));