title: Pixel font is anti-aliased in HTML5 Canvas
body: <p>I'm trying to draw 8-bit pixel text on an HTML5 canvas. I've tried:</p>
  
  <pre><code>_context['imageSmoothingEnabled'] = false;
  _context['mozImageSmoothingEnabled'] = false;
  _context['oImageSmoothingEnabled'] = false;
  _context['webkitImageSmoothingEnabled'] = false;
  _context['msImageSmoothingEnabled'] = false;
  </code></pre>
  
  <p>and some other things having to do with the HTML &amp; CSS font face while googling for over an hour. This is the font-face:</p>
  
  <pre><code>@font-face {
      font-family: "undertalefont";
      src: url("bitops.ttf");
      font-style: normal;
      -webkit-font-smoothing: none;
  }
  </code></pre>
  
  <p>When using it in HTML, it attempts to use an odd form of subpixel anti-aliasing. And it of renders the font as expected in image-editing programs.</p>
  
  <p>So my question is, how do I stop this... (scaled to 200% to see the bad AA)</p>
  
  <p><a href="https://i.imgur.com/LjsatBx.png" rel="noreferrer"><img src="https://i.imgur.com/LjsatBx.png" alt="Ugly AA"></a></p>
  
  <p>and make it pixel-perfectly crisp?</p>
  
  <p>EDIT: I'm rendering the text with:</p>
  
  <pre><code>_context.fillStyle = "white";
  _context.font = "24px 'undertalefont'";
  _context.fillText("Font rendering.", 32, 20);
  </code></pre>