RAX7

Сделай вспомогательную функцию для загрузки картинок, которая будет возвращать промис. Код с созданием персонажа оберни в асинхронную функцию и дождись в ней загрузки картинки.

const canvas = document.getElementById('canvas');

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.src = src;

    if (image.complete) {
      resolve(image);
      return;
    }

    image.onload = () => resolve(image);
    image.onerror = (e) => reject(e);
  });
}

class Character {
  constructor(options) {
    this.ctx = options.ctx;

    this.image = options.image;
    this.width = options.width;
    this.height = options.height;

    this.render();
  }

  load() {}

  render() {
    this.ctx.drawImage(this.image, 0, 0, this.width / 7, this.height, 0, 0, this.width / 7, this.height);
  }
}

(async function main() {
  const spriteImage = await loadImage('./img/sprite.png');

  const character = new Character({
    ctx: canvas.getContext('2d'),
    image: spriteImage,
    width: 448,
    height: 60,
  });
})();

- callback(rooms) {
+ callback: (rooms) => {

function rgbaToAndroid1(rgba) {
  const c = new Uint8Array([
    rgba[2],
    rgba[1],
    rgba[0],
    Math.round(rgba[3] * 255)
  ]);
  return new Uint32Array(c.buffer)[0];
}

// либо
function rgbaToAndroid2(rgba) {
  let color = 0;
  for (let i = 0; i < 3; i++) {
    color += rgba[i] * 2 ** ((2 - i) * 8);
  }

  color += Math.round(rgba[3] * 255) * 2 ** (3 * 8);
  return color;
}

console.log(rgbaToAndroid1([255, 122, 107, 1]));
console.log(rgbaToAndroid2([255, 122, 107, 1]));

function createTable(el) {
	for (let i = 0, row; i < el.length; i++) {
    if (i % 7 === 0) {
      row = document.createElement('tr');
      thead.appendChild(row);
    }
		const cell = document.createElement('th');
		cell.innerHTML = el[i];
		row.appendChild(cell);
	}
}

и вдогонку https://stackoverflow.com/questions/222309/calcula...

Через Animations API можно посмотреть на свойство playState в какой-то конкретный момент времени, но какого-то события для этого нет.
Можно состряпать собственный костыль на основе Animations API и requestAnimationFrame.

Но проще и лучше будет запускать анимацию не по css hover, а из js - этот способ избавит от ненужных костылей.

У объекта события есть свойство timeStamp, зная значения предыдущего и текущего timeStamp можно посчитать частоту срабатывания события.

function checkingReading() {
  let prevTimeStamp = performance.now();
  chatbox.addEventListener("DOMSubtreeModified", (e) => {
    const dt = e.timeStamp - prevTimeStamp;
    prevTimeStamp = e.timeStamp;
    
    const changesPerSecond = 1000 / dt;
    console.log(changesPerSecond)
  });
}

P.S. возможно тебе нужен debounce чтобы не слишком часто слать запросы

Такие штуки проще на svg делать

Можно для функции range использовать генератор, в этом случае не будет выделятся память под ненужный массив

function* range(from, to, step = 1) {
  if (to === undefined) [from, to] = [0, from];
  for (let i = from; i < to; i += step) yield i;
}

for (let v of range(1, 10)) {
  console.log(v);
}

На странице плагина ScrollTrigger есть куча примеров, которые должны помочь разобраться.

Скорее всего этот эффект сделан на основе шума Перлина
Можно сделать примерно так:

Object.entries({name, age})
  .forEach(([k, v]) => form.append(k, v));