title: HTML5 canvas anti-alias?
body: <p>I'm trying to draw a quadratic curve with canvas. Here is the code:<br>
  HTML:  </p>
  
  <pre><code>&lt;canvas id="mycanvas"&gt; 
      Your browser is not supported.
  &lt;/canvas&gt; 
  </code></pre>
  
  <p>JavaScript: </p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>But the result is really ugly, first, the lines are too thick, second, the alias is so obvious.... how could I improve it?<br>
  You can see the effect here: <a href="http://jsfiddle.net/7wNmx/1/" rel="nofollow noreferrer">http://jsfiddle.net/7wNmx/1/</a>  </p>