HTML5 canvas anti-alias?

Question

I'm trying to draw a quadratic curve with canvas. Here is the code:
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);
}

But the result is really ugly, first, the lines are too thick, second, the alias is so obvious.... how could I improve it?
You can see the effect here: http://jsfiddle.net/7wNmx/1/

Answer 1

Another thing is that you're stroking each time. So the first line is drawn most, whilst the second is drawn one less time, etc.

This also causes it to become ugly. You'd need to begin a new path and only stroke that one:

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);
}

Compare:

It's also faster since less drawing is done.