example/shell.html

<html>
    <head>
      <title>pntr-font: Examples</title>
      <style>
        html, body {
          width:  100vw;
          height: 100vh;
          margin: 0;
          overflow: hidden;
          font-family: null0;
        }

        body {
          background: rgb(20, 20, 20);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          text-align: center;
        }

        canvas {
          image-rendering: -moz-crisp-edges;
          image-rendering: -webkit-crisp-edges;
          image-rendering: pixelated;
          image-rendering: crisp-edges;
          object-fit: contain;
        }

        canvas.landscape {
            height: 100vh;
            max-width: 100vw;
        }
        canvas.portrait {
            width: 100vw;
            max-height: 100vh;
        }
      </style>
    </head>
    <body>
        <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
            <script type='text/javascript'>
const canvas = document.getElementById('canvas')

const onResize = () => {
  window.removeEventListener('resize', onResize)
  setTimeout(() => { window.addEventListener('resize', onResize) }, 100)
  const { clientWidth, clientHeight } = document.body
  canvas.className = clientWidth > clientHeight ? 'landscape' : 'portrait'
}
onResize()

window.Module = {
  preRun: [],
  postRun: [],
  print: console.log,
  canvas
}
</script>
        {{{ SCRIPT }}}
    </body>
</html>