JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://pixijs.download/v4.8.9/pixi.js"></script>
<canvas id='game_canvas'>
</canvas>

CSS

body {
  margin: 0px;
}

JavaScript

const canvas = document.getElementById('game_canvas')
const TILE_SIZE = 32
const SHIP_SIZE = 8 * TILE_SIZE

const app = window.app = new PIXI.Application({
  view: canvas,
  forceCanvas: false,
  antialias: true,
  width: window.innerWidth,
  height: window.innerHeight
})

function createTileTexture(color) {
  let graphics = new PIXI.Graphics()
  graphics.beginFill(color)
  graphics.drawRect(0, 0, TILE_SIZE, TILE_SIZE)
  graphics.endFill()
  return app.renderer.generateTexture(graphics)
}

function createBorderTexture(width, height) {
  let graphics = new PIXI.Graphics()
  graphics.lineStyle(1, 0x00ff00)
  graphics.drawRect(0, 0, width, height)
  return app.renderer.generateTexture(graphics)
}


function createTile(texture, row, col) {
  let sprite = new PIXI.Sprite(texture)
  sprite.position.set(col * TILE_SIZE, row * TILE_SIZE)
  return sprite
}


let origContainer = new PIXI.Container()
let cachedContainer = new PIXI.Container()
cachedContainer.position.x = 12 * TILE_SIZE

let ship  = new PIXI.Container()
ship.position.set(7 * TILE_SIZE, 7 * TILE_SIZE)
ship.pivot.x = SHIP_SIZE / 2
ship.pivot.y = SHIP_SIZE / 2
let cachedShip = new PIXI.Sprite()

let style = {fontSize: 20, fontFamily: "Arial", align: "center", fill : 0xeeeeee, strokeThickness: 3  }
origContainer.addChild(new PIXI.Text("orig", style))
origContainer.addChild(ship)

cachedContainer.addChild(new PIXI.Text("cached", style))
cachedContainer.addChild(cachedShip)

app.stage.addChild(origContainer)
app.stage.addChild(cachedContainer)


let borderTexture = createBorderTexture(SHIP_SIZE, SHIP_SIZE)
let shipBorder = new PIXI.Sprite(borderTexture)
ship.addChild(shipBorder)

let redTexture = createTileTexture(0xff0000)
for (let i = 0; i < 8; i++) {
  let tile = createTile(redTexture, i,i)
  ship.addChild(tile)
  tile = createTile(redTexture, 7-i,i)
  ship.addChild(tile)
}

var m = new PIXI.Matrix()
ship.transform.localTransform.copy(m)
m.invert()
m.tx -= 96
m.ty -= 96

let cachedTexture =...