Lien anti-alias HTML5?

J'essaie de dessiner une courbe quadratique avec une toile. Voici le 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); } 

Mais le résultat est vraiment laid, d'abord, les lignes sont trop épaisses, deuxièmement, l'alias est tellement évident …. Comment puis-je l'améliorer?
Vous pouvez voir l'effet ici: http://jsfiddle.net/7wNmx/1/

Ce que vous faites, c'est créer un canevas qui est la taille par défaut, 300 par 150, puis l'étendre en utilisant CSS à 1000px par 1000px. Mais la mise à l'échelle de cette façon ne fait que magnifier la taille des pixels, elle n'augmente pas la résolution de la toile elle-même. Ce que vous devez faire est de définir les dimensions réelles de la toile elle-même en utilisant les attributs de width et de height :

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

Ensuite, vous n'avez pas besoin de l'étendre en configurant canvas.style.width et height plus.

Une autre chose est que vous caressez à chaque fois. Donc, la première ligne est le plus tirée, tandis que la seconde est dessinée moins de temps, etc.

Cela provoque également une aggravation. Vous devriez commencer un nouveau chemin et ne tracer que l'un:

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

Comparer:

Http://i.stack.imgur.com/40M20.png

C'est aussi plus rapide car moins de dessin est réalisé.