Great article! Frustrated that Firefox doesn't support "image-rendering: pixelated". FF supports "crisp-edges" and happens to implement that as nearest-neighbor filtering but the spec says that is not the meaning of "crisp-edges". I don't understand why Firefox is dragging their feet on this. It seems like such an easy thing to add. In fact given their current implementation they could just make `pixelated` a synonym…
Here is a cross-browser compatible workaround, courtesy of Gavin Kistner from phrogz.net:
.pixelated {
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Safari */
image-rendering:optimize-contrast; /* CSS3 Proposed */
image-rendering:crisp-edges; /* CSS4 Proposed */
image-rendering:pixelated; /* CSS4 Proposed */
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// turn off image smoothing when upscaling with ctx.drawImage()
ctx.imageSmoothingEnabled = false;
[1] https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...
[2] https://observablehq.com/@jobleonard/gotta-keep-em-pixelated