title: Big image drawn on small canvas become blurrier
body: <p>In my project i have a canvas (200*150) and i want to draw an image of size (800*600) . The result is that image become bluer (not smooth and clear) , but if we put that image on <em>img</em> tag it look well. So how can we deal with this? thanks.</p>
  
  <pre><code>&lt;img src="http://www.drivingkids.com/wp-content/uploads/2010/07/preschool-math-game-for-kids-math-racing-equatations.jpg"
  width="200" heigh="150" /&gt;
  &lt;canvas id="my_canvas" width="200" height="150"&gt;&lt;/canvas&gt;
  &lt;script type="text/javascript"&gt;
      window.onload = function () {
          var context = document.getElementById("my_canvas").getContext("2d");
          var image = new Image();
          image.src = "http://www.drivingkids.com/wp-content/uploads/2010/07/preschool-math-game-for-kids-math-racing-equatations.jpg";
          image.onload = function () {
              context.drawImage(image, 0, 0, context.canvas.width, context.canvas.height); //dx-30, GY-28, GW+50, GH+35
          }
      }
  &lt;/script&gt;
  </code></pre>