Export each animation frame to a `png` with `windowjs`

windowsjs_export.js

window.title = "Hello!";
window.visible = false;

const canvas = window.canvas;

const requestMonotonicAnimationFrame = (function () {
  const fps = 60;
  let start = 0;
  const timestep = (function* () {
    const step = 1000 / fps;
    while (true) {
      yield start;
      start += step;
    }
  })();

  return function (callback) {
    callback(timestep.next().value);
  };
})();

const draw = (function () {
  const length = 6;
  let start = 0;
  const cyan = "#023047";
  const orange = "darkorange";
  const rotationSpeed = 300;
  const paddedInt = (function* () {
    while (true) {
      yield String(start++).padStart(length, "0");
    }
  })();

  return async function (delta = 0) {
    canvas.fillStyle = cyan;
    canvas.fillRect(0, 0, canvas.width, canvas.height);

    canvas.fillStyle = orange;
    const y = canvas.height / 2;
    const w = canvas.width;
    const t = Math.cos(delta / rotationSpeed);
    const x = w / 2 + (w / 4) * t;

    canvas.save();
    canvas.translate(x, y);
    canvas.rotate((t * Math.PI) / 2);
    canvas.fillRect(-100, -100, 200, 200);
    canvas.restore();

    const screenshot = await canvas.encode();
    const filepath = File.cwd + "/tmp/" + paddedInt.next().value + ".png";
    await File.write(filepath, screenshot);

    requestMonotonicAnimationFrame(draw);
  };
})();

// Start the animation
requestMonotonicAnimationFrame(draw);