HTML5 implementation progress bar function effect

HTML5 implementation of progress bar function is very harmonious

<script type= "Text/javascript" > var i = 0;
    var res = 0;
    var context = null;
    var total_width = 300;
    var total_height = 34;
    var initial_x = 20;
    var initial_y = 20;
    var radius = TOTAL_HEIGHT/2;
        Window.onload = function () {var elem = document.getElementById (' MyCanvas ');
        if (!elem!elem.getcontext) {return;
        context = Elem.getcontext (' 2d ');
        if (!context) {return;
        }//Set font Context.font = "16px Verdana"; Blue Gradient for progress bar var Progress_lingrad = context.createlineargradient (0,initial_y+total_height,0,0
        );
        Progress_lingrad.addcolorstop (0, ' #4DA4F3 ');
        Progress_lingrad.addcolorstop (0.4, ' #ADD9FF ');
        Progress_lingrad.addcolorstop (1, ' #9ED1FF ');
        Context.fillstyle = Progress_lingrad;
        Draw ();
    res = SetInterval (draw, 30);
        function Draw () {i+=1; Clear everYthing before drawing context.clearrect (initial_x-5,initial_y-5,total_width+15,total_height+15);
        Progresslayerrect (context, initial_x, initial_y, Total_width, total_height, radius);
        Progressbarrect (context, initial_x, initial_y, I, total_height, radius, total_width);
        Progresstext (context, initial_x, initial_y, I, total_height, radius, total_width);
        if (i>=total_width) {clearinterval (res);
     }/** * Draws a rounded rectangle. * @param {Canvascontext} CTX * @param {number} x the top left x coordinate * @param {number} y the top left y Co 
     Ordinate * @param {number} width the width of the rectangle * @param {number} is the height of the rectangle
     * @param {Number} radius the corner radius;
        */function RoundRect (CTX, x, y, Width, height, radius) {Ctx.beginpath ();
        Ctx.moveto (x + radius, y);
        Ctx.lineto (x + Width-radius, y); Ctx.arc (x+width-Radius, Y+radius, radius,-MATH.PI/2, MATH.PI/2, false);
        Ctx.lineto (x + radius, y + height);
        Ctx.arc (X+radius, Y+radius, radius, MATH.PI/2, 3*MATH.PI/2, false);
        Ctx.closepath ();
    Ctx.fill ();
     }/** * Draws a rounded rectangle. * @param {Canvascontext} CTX * @param {number} x the top left x coordinate * @param {number} y the top left y Co 
     Ordinate * @param {number} width the width of the rectangle * @param {number} is the height of the rectangle
     * @param {Number} radius the corner radius;
        */function Roundinsetrect (CTX, x, y, Width, height, radius) {Ctx.beginpath ();
        Draw Huge anti-clockwise box Ctx.moveto (1000, 1000);
        Ctx.lineto (1000,-1000);
        Ctx.lineto (-1000,-1000);
        Ctx.lineto (-1000, 1000);
        Ctx.lineto (1000, 1000);
        Ctx.moveto (x + radius, y);
        Ctx.lineto (x + Width-radius, y); Ctx.arc (X+width-radius, Y+radius, radius, MAth.
        PI/2, MATH.PI/2, false);
        Ctx.lineto (x + radius, y + height);
        Ctx.arc (X+radius, Y+radius, radius, MATH.PI/2, 3*MATH.PI/2, false);
        Ctx.closepath ();
    Ctx.fill ();
        function Progresslayerrect (CTX, x, y, Width, height, radius) {ctx.save ();
        Set shadows to make some depth ctx.shadowoffsetx = 2;
        Ctx.shadowoffsety = 2;
        Ctx.shadowblur = 5;
         Ctx.shadowcolor = ' #666 ';
        Create initial grey Layer Ctx.fillstyle = ' Rgba (189,189,189,1) ';
        RoundRect (CTX, x, y, Width, height, radius); Overlay with gradient Ctx.shadowcolor = ' Rgba (0,0,0,0) ' var Lingrad = ctx.createlineargradient (0,y+heig
        ht,0,0);
        Lingrad.addcolorstop (0, ' Rgba (255,255,255, 0.1) ');
        Lingrad.addcolorstop (0.4, ' Rgba (255,255,255, 0.7) ');
        Lingrad.addcolorstop (1, ' Rgba (255,255,255,0.4) ');
        Ctx.fillstyle = Lingrad;
      RoundRect (CTX, x, y, Width, height, radius);  Ctx.fillstyle = ' white ';
        Roundinsetrect (CTX, x, y, Width, height, radius);
    Ctx.restore ();
     }/** * Draws a half-rounded progress bar to properly fill rounded under-layer * @param {canvascontext} CTX * @param {Number} x the top left x coordinate * @param {number} y coordinate * @param {Numbe  R} width The width of the bar * @param {number} height the height of the bar * @param {number} radius the corner
     Radius
     * @param {number} max the Under-layer total width;  */function Progressbarrect (CTX, x, y, Width, height, radius, max) {//var to store offset for proper filling
        When inside rounded area var offset = 0;
        Ctx.beginpath ();
            if (Width<radius) {offset = radius-math.sqrt (Math.pow (radius,2)-math.pow ((Radius-width), 2));
            Ctx.moveto (x + width, y+offset);
            Ctx.lineto (x + width, y+height-offset); Ctx.arc (x + radius, y + RAdius, Radius, Math.pi-math.acos (radius-width)/radius), Math.PI + Math.acos ((radius-width)/radius), false); The else if (width+radius>max) {offset = radius-math.sqrt (Math.pow (radius,2)-math.pow (Radiu
            S-(Max-width)), 2);
            Ctx.moveto (x + radius, y);
            Ctx.lineto (x + width, y);
            Ctx.arc (X+max-radius, y + radius, radius,-MATH.PI/2,-math.acos ((Radius-(max-width))/radius), false);
            Ctx.lineto (x + width, y+height-offset);
            Ctx.arc (X+max-radius, y + radius, radius, Math.acos (RADIUS-(max-width)/radius), MATH.PI/2, false);
            Ctx.lineto (x + radius, y + height);
        Ctx.arc (X+radius, Y+radius, radius, MATH.PI/2, 3*MATH.PI/2, false);
            else {Ctx.moveto (x + radius, y);
            Ctx.lineto (x + width, y);
            Ctx.lineto (x + width, y + height);
            Ctx.lineto (x + radius, y + height); Ctx.arc (X+radius, Y+radius, RadiuS, MATH.PI/2, 3*MATH.PI/2, false);
        } ctx.closepath ();
        Ctx.fill ();
            Draw progress bar Right Border shadow if (width<max-1) {ctx.save ();
            Ctx.shadowoffsetx = 1;
            Ctx.shadowblur = 1;
            Ctx.shadowcolor = ' #666 ';
            if (width+radius>max) offset = offset+1;
            Ctx.fillrect (x+width,y+offset,1,total_height-offset*2);
        Ctx.restore ();  }/** * Draws properly-positioned progress bar percent text * @param {canvascontext} CTX * @param {Number} x the top left x coordinate * @param {number} y the top left y coordinate * @param {number} width the
     width of the bar * @param {number} height the height of the bar * @param {number} radius the corner radius;
     * @param {number} max the Under-layer total width;
        */function Progresstext (CTX, x, y, Width, height, radius, max) {ctx.save (); Ctx.fillStyle = ' white ';
        var text = Math.floor (width/max*100) + "%";
        var text_width = ctx.measuretext (text). width;
        var text_x = X+WIDTH-TEXT_WIDTH-RADIUS/2;
        if (width<=radius+text_width) {text_x = X+RADIUS/2;
        } ctx.filltext (text, text_x, y+22);
    Ctx.restore ();



 } </script>