プログレスバーのステップをJavaScriptのピクセルに変換する

Question

JavaScriptの単純なプログレスバーをhtml 5 canvas要素を使って実装しました。プログレスバーは100ステップを表示できます。 （0-100％） プログレスバーは可変サイズを持つことができます。 したがって、すべてのステップについて、私は矩形を描きます。

例： - プログレスバーキャンバスの幅は100ピクセルです。 - すべてのステップで、新しい1ピクセル幅のブロックを描画します。

問題： - プログレスバーキャンバスの幅は550pxです。 - ステップブロックサイズは5.5ピクセル（550 /ステップ）です - 半ピクセルを描画できません。 Math.floorまたはMath.Roundを使用すると、プログレスバーは100％で完全に記入されないか、または「過剰充填」されます。

どうすれば問題を解決できますか？

var percWidth = Math.round(canvas.width/100); 

for (var i = 0; i<= percentage; i++) 
{ 

var r,g,b; 
if (i <= 50) 
{ 
    r = 255; 
    g = Math.round((255*i)/50); 
    b = 0; 
} 
else 
{ 
    r = Math.round((255*(100-i))/50); 
    g = 255; 
    b = 0 
} 

context.fillStyle = "rgb("+r+", "+g+", "+b+")"; 
context.fillRect((i*percWidth), 0, (1*percWidth), canvas.height); 

} 

Answer 1

最終的な結果のみラウンド：

context.fillRect(Math.round(i*canvas.width/100), 0, (percWidth), canvas.height); 

Answer 2

私はこれは、あなたの質問に直接適用されていません知っている - しかし、<progress>適して代わるものでは？