javascript - HTML5キャンバスアンチエイリアス?

Question

キャンバスで二次曲線を描こうとしています。コードは次のとおりです。
HTML:

<canvas id="mycanvas"> 
    Your browser is not supported.
</canvas> 

JavaScript:

var canvas = document.getElementById("mycanvas");
canvas.style.width = "1000px";
canvas.style.height = "1000px";
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    var x = 0,
        y = 0;
    setInterval(function() {
        ctx.lineTo(x, y);
        ctx.stroke();
        x += 1;
        y = 0.01 * x * x;
    }, 100);
}

しかし、結果は本当に醜いです。まず、線が太すぎます。次に、エイリアスが非常に明白です....どうすれば改善できますか?
ここで効果を確認できます: http://jsfiddle.net/7wNmx/1/

Answer 1

もう一つは、毎回なでているということです。したがって、最初の線が最も多く描かれ、2 番目の線は 1 回少なく描かれます。

これも醜くなる原因です。新しいパスを開始し、そのパスのみをストロークする必要があります。

var canvas = document.getElementById("mycanvas");
canvas.style.width = "1000px";
canvas.style.height = "1000px";
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    var x = 0,
        y = 0;
    setInterval(function() {
        ctx.beginPath();
        ctx.moveTo(x,y)
        x += 1;
        y = 0.01 * x * x;
        ctx.lineTo(x, y);
        ctx.stroke();
    }, 100);
}

比較：

また、描画が少ないため高速です。