title: Nearest Neighbor rendering in Canvas
body: <p>I have a sprite that animates using a sprite sheet. He is only 16x16, but I want to scale him up to around 64x64 in all its pixel-y goodness! </p>
  
  <p><img src="https://i.imgur.com/t6FVnSw.jpg" alt="alt text"></p>
  
  <p>The results are terrible, of course the browser is anti aliasing it. :/</p>
  
  <p>Thanks!</p>
  
  <p>EDIT: 
  No css needed, here is my draw function.</p>
  
  <pre><code>function drawSprite(offsetx:number,offsety:number,posx:number,posy:number){
      ctx.drawImage(img, offsetx*32, offsety*32, 32, 16, posx*32, posy*8, 128, 32);
  }
  </code></pre>
  
  <p>See it kinda working <a href="https://codepen.io/DevEarley/pen/xzOMYq" rel="nofollow noreferrer">here (codepen)</a></p>