How can I scale my game sharply?

[Goshawk]

I am making a game based on 16x16 sprites which I want to scale to fit the scree. The gameboard is 160 pixels wide.

The problem is, I cannot get the pixels to render sharply (as if I'd enlarge them using nearest neighbour resize in Photoshop).

I have styled the game canvas like so:

canvas {
    /*centre canvas*/
    padding: 0px;
    margin: 0px;
    display:block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /*fit canvas to viewport*/
    min-height: 100vh;
    max-height: 100vh;
    min-width: 100vw;
    max-width: 100vw;
    object-fit: cover;
    -ms-interpolation-mode: nearest-neighbor;  // IE 7+ (non-standard property)
    image-rendering: -webkit-optimize-contrast; // Safari 6, UC Browser 9.9
    image-rendering: -webkit-crisp-edges; // Safari 7+
    image-rendering: -moz-crisp-edges; // Firefox 3.6+
    image-rendering: -o-crisp-edges; // Opera 12
    image-rendering: pixelated; // Chrome 41+ and Opera 26+
}

I have a boot state with the following init method:

export default class extends Phaser.State {
  init() {
    this.stage.backgroundColor = '#EDEEC9'
    this.smoothed = false
    this.fontsReady = false
    this.fontsLoaded = this.fontsLoaded.bind(this)

    this.scale.startFullScreen(true) // Display as fullscreen on devices that support fullscreen api
    this.game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT
    this.stage.smoothed = false;
  }

From what I can tell from this example `this.stage.smoothed` should ensure that the pixels renders crisply. However, they do not.

What do I need to do to get my images to render sharp?
 

 

[samme]

You may need to use the CANVAS renderer. https://codepen.io/samme/pen/XBYqmE?editors=0010

[Goshawk]

Thanks for the clear example.