Pixel font is anti-aliased in HTML5 Canvas
<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>