Here is a cross-browser compatible workaround, courtesy of Gavin Kistner from ph...

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+           */
    }

And if you want to do pixelated upscaling while drawing an image on a <canvas> element:

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    // turn off image smoothing when upscaling with ctx.drawImage()
    ctx.imageSmoothingEnabled = false;

[0] http://phrogz.net/tmp/canvas_image_zoom.html

[1] https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...

[2] https://observablehq.com/@jobleonard/gotta-keep-em-pixelated