html {
  height: 100%;
}

body {
  background-color: #000;
  margin: 0;
  display: flex;
  height: 100%;
}

canvas {
  background: #FFF;
  margin: auto;
  /* width: min(calc(45vw + 45vh + 150px), 100vw, 100vh);
  height: min(calc(45vw + 45vh + 150px), 100vw, 100vh); */
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
}

canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}