title: How to resize a canvas without anti-aliasing?
body: <p><strong>Update</strong></p>
  
  <p>It's definitely to do with how I'm rescaling the canvas. If I draw the same scene onto a canvas and I don't change it's width and height to fill the screen, it works perfectly.</p>
  
  <p><img src="https://i.stack.imgur.com/yI5zL.jpg" alt="Working"></p>
  
  <p>What is the correct way to resize a canvas for fullscreen environments?</p>
  
  <hr>
  
  <p>I'm writing a game engine for canvas and am having problems with images being upscaled and aliased, I read through a couple of answers for people having similar problems. I amended my code to enable the following settings on each of my canvases.</p>
  
  <pre><code>context.webkitImageSmoothingEnabled = false;                                                                                
  context.mozImageSmoothingEnabled = false;                                                                                   
  context.imageSmoothingEnabled = false;
  </code></pre>
  
  <p>Just to make sure, I also included the CSS alternatives of these rules.</p>
  
  <pre><code>canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
    image-rendering: -o-crisp-edges;            // OS X &amp; Windows Opera (12.02+)
    image-rendering: crisp-edges;               // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
  }
  </code></pre>
  
  <p>Here's an example of one of the original images I am trying to draw.</p>
  
  <p><img src="https://i.stack.imgur.com/1Z9W8.png" alt="Character"></p>
  
  <p>I'm then upscaling from 16x16 to 64x64 and instead of coming out looking like nearest-neighbour interpolation was used, it renders like this.</p>
  
  <p><img src="https://i.stack.imgur.com/08xio.jpg" alt="Actual result"></p>
  
  <p>I get the same results in Chrome and Firefox. I don't want to do a preprocessing step to upscale the images, either. It's got to be possible, because <a href="http://jsfiddle.net/AbdiasSoftware/TYUUJ/" rel="nofollow noreferrer">this demo</a> works for me.</p>
  
  <p>The other thing to mention, is that the engine is designed to be used in fullscreen, so I am manually keeping the size of the canvases up to date with this function. </p>
  
  <pre><code>fill-screen = (canvas) -&gt;
    canvas.width = document.body.clientWidth
    canvas.height = document.body.clientHeight
  </code></pre>
  
  <p>The canvases are absolutely positioned to the top left hand corner of their parent, other than that, there are no non-browser CSS rules operating on them.</p>
  
  <p>Maybe I'm doing something stupid, but I've been looking at this for ages and I'm getting no closer. The code for the file where I am creating the canvases and contexts is here: <a href="https://gist.github.com/code-curve/9273248" rel="nofollow noreferrer">https://gist.github.com/code-curve/9273248</a></p>