Tutorial: How to use `stats.js` with Litecanvas

readme.md

How to use stats.js with Litecanvas

The stats.js library provides a simple info box that will help you monitor your code performance.

---

• Add the stats.js library in your HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/stats.min.js"></script>

• Monitor your game frames via Litecanvas' events

litecanvas()

function init() {
  // ...

  // put these lines in your init function
  let stats = new Stats()
  stats.dom.style.position = 'absolute'
  document.body.appendChild(stats.dom)
  listen('before:update', (_, i = 1) => {
    if (i === 1) stats.begin()
  })
  listen('after:draw', () => stats.end())
}

function update(dt) {
  // ...
}

function draw() {
  // ...
}

---

On Litecanvas' playground you can use this snippet:

function init() {
  // ...
  
  loadScript('https://cdn.jsdelivr.net/npm/[email protected]/build/stats.min.js', () => {
    stats = new Stats()
    stats.dom.style.position = 'absolute'
    document.body.appendChild(stats.dom)
    listen('before:update', (_, i = 1) => {
      if (i === 1) stats.begin()
    })
    listen('after:draw', () => stats.end())
  })
}