JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<div id="canvas-container"></div>

CSS

body {
  background-color: #222222;
}

#canvas-container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -256px;
  margin-left: -256px;
}

JavaScript

// Title: Phaser (Bug?): unwanted antialiasing on WEBGL renderer during spritesheet animation.
// Description: The unwanted antialiasing happens when the sprite is near the canvas's border (top and left), check out moving the sprite with the arrow keys.

var gameStates = {};
var gameObjects = {};
var gameInputCursors;

// Bug if init with Phaser.AUTO or Phaser.WEBGL, not with Phaser.CANVAS.
var game = new Phaser.Game(128, 128, Phaser.WEBGL, 'canvas-container');

gameStates.play = {

  init: function() {
    gameInputCursors = game.input.keyboard.createCursorKeys();
  },

  preload: function() {
  	/**
     * Third-party image user only for for example
     * @see https://jpillora.com/base64-encoder/
     * @credits http://opengameart.org/sites/default/files/styles/watermarked/public/sumoHulk_spriteSheet_x4.png
     */
  	game.load.spritesheet('s1',...