title: Upscaled canvas is not getting antialiased
body: <p>I am creating a game where html5 canvas is taking up the entire screen.
  But when I use the</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width"&gt;
  </code></pre>
  
  <p>tag, the canvas gets pixelated badly on the newest Chrome for Android.</p>
  
  <p>I have created a simple test (available <a href="http://ciebiada.com/test" rel="nofollow">here</a>):</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
          &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
          &lt;meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
          &lt;script&gt;
              window.onload = function () {
                  var canvas = document.getElementById("canvas"),
                      ctx = canvas.getContext("2d"),
                      radius = 0;
  
                  canvas.width = window.innerWidth;
                  canvas.height = window.innerHeight;
  
                  radius = (canvas.width &lt; canvas.height) ? canvas.width / 3 : canvas.height / 3;
  
                  ctx.beginPath();
                  ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI, false);
                  ctx.fillStyle = "red";
                  ctx.fill();
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It draws a red dot in the middle of the screen. This works great everywhere except the Chrome for Android. Which renders <a href="http://ciebiada.com/test/android.png" rel="nofollow">this</a>.</p>
  
  <p>Anyone knows what's going on?</p>