如何在HTML Canvas上绘制出比此图像更光滑的椭圆形？

Question

这里是我做的小部件的照片：

这里是调用所有原始形状的主要功能：

function cylinder(ctx, w, h, fill_percent){ 
    y_origin = h; 
    x_origin = 0; 
    drawContainerBottom(ctx, x_origin, y_origin, w, h); 
    drawContentBottom(ctx, x_origin, y_origin, w, h); 
    drawContentFront(ctx, x_origin, y_origin, w, h, fill_percent); 
    drawContentTop(ctx, x_origin, y_origin, w, h, fill_percent); 
    drawContainerFront(ctx, x_origin, y_origin, w, h); 
    drawContainerTop(ctx, x_origin, y_origin, w, h); 
} 

这里是画的顶部的功能外部容器，主要看起来很糟糕：

function drawContentTop(ctx, x, y, w, h, fill_percent){ 
    Contents_offset=5; 
    w=w-2*Contents_offset; 
    x=x+Contents_offset; 
    h=h; 
    y=y-h+Contents_offset+(h-w/4-2*Contents_offset)*(1-fill_percent); 
    var i; 
    var xPos; 
    var yPos; 
    var twoPi = 2 * Math.PI; 
    ctx.beginPath(); 

    //Top 
    for (i = 0; i < twoPi; i += 0.001) { 
     xPos = (x + w/2) - (w/2 * Math.cos(i)); 
     yPos = (y + w/8) + (w/8 * Math.sin(i)); 

     if (i === 0) { 
      ctx.moveTo(xPos, yPos); 
     } else { 
      ctx.lineTo(xPos, yPos); 
     } 
    } 

    ctx.fillStyle="rgba(0, 99, 188, .5)"; 
    ctx.fill(); 
    ctx.strokeStyle="rgba(0, 99, 188, 1)"; 
    ctx.stroke(); 
}; 

以下是我如何称之为：

<canvas name='pool_graphic' class='pool_graphic' width='125' height='125' style='padding:10px'></canvas><br /> 
<canvas name='pool_graphic' class='pool_graphic' width='125' height='125' style='padding:10px'></canvas><br /> 
<script> 
    $("td canvas[name='pool_graphic']").each(function(){ 
     var ctx = this.getContext('2d'); 
     var padding = this.style.padding.replace(/[^0-9]+/, ''); 
     var w=this.width 
     var h=this.height; 
     var fill_percent=1; 
     cylinder(ctx, w, h, fill_percent); 

    }); 
</script> 

首先，当我在所有情况下使用相同的手动类型循环时，为什么它只是外部容器的顶部和底部看起来很糟糕？其次，我如何解决锯齿状问题？

编辑：只是不停地用讨论的技术tweeking，这里是我得到了什么