Anti-alias de canvas HTML5?

Question

Estoy tratando de dibujar una curva cuadrática con lienzo. Aquí está el código:
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); 
} 

Pero el resultado es realmente feo, en primer lugar, las líneas son demasiado gruesas, en segundo lugar, el alias es tan obvio ... ¿Cómo podría mejorarlo?
Se puede ver el efecto aquí: http://jsfiddle.net/7wNmx/1/

Answer 1

Lo que estás haciendo es crear un lienzo que es el tamaño por defecto, 300 por 150, y luego aumentar la escala usando CSS a 1000 píxeles por 1000 píxeles. Pero escalarlo de esa manera solo aumenta el tamaño de los píxeles, no aumenta la resolución del lienzo en sí. Lo que hay que hacer es establecer las dimensiones reales de la propia tela usando las width y height atributos:

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

Entonces no es necesario ampliarlo mediante el establecimiento de canvas.style.width y height más.

Answer 2

Otra cosa es que está acariciando cada tiempo. Así que la primera línea se dibuja más, mientras que la segunda se dibuja una vez menos, etc.

Esto también hace que se ponga feo. Que había necesidad de iniciar un nuevo camino y sólo trazo que uno:

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:

Es también más rápido, ya que menos dibujo se hace.