title: Html5 canvas drawImage: how to apply antialiasing
body: <p>Please have a look at the following example:</p>
  
  <p><a href="http://jsfiddle.net/MLGr4/47/" rel="noreferrer">http://jsfiddle.net/MLGr4/47/</a></p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  img = new Image();
  img.onload = function(){
      canvas.width = 400;
      canvas.height = 150;
      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150);
  }
  img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg";
  </code></pre>
  
  <p>As you see, the image is not anti-aliased although it is said that drawImage applies anti aliasing automatically. I tried many different ways but it doesn't seem to work. Could you please tell me how I can get anti-aliased image?
  Thanks.</p>