The changes in the canvas are not being recognized correctly.

[yoshi-pi]

Problem

I wrote code to display a green screen on the canvas for 1000ms and a blue screen for 300ms, alternating between the two, but the recorded video shows that the blue and green screens are displayed irregularly. Is there any way to address this issue?

Code

const canvas = document.createElement("canvas");
canvas.width = 3840;
canvas.height = 2160;
const ctx = canvas.getContext("2d");
const stream = canvas.captureStream();
const recordedChunks = [];
const mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm" });
mediaRecorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    download();
  }
};

async function start() {
  mediaRecorder.start();
  for (let i = 0; i < 20; i++) {
    ctx.fillStyle = "green";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    await new Promise((resolve) => {
      setTimeout(resolve, 1000);
    });
    requestAnimationFrame(() => {
      ctx.fillStyle = "blue";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    });
    await new Promise((resolve) => {
      setTimeout(resolve, 300);
    });
  }
  mediaRecorder.stop();
}
start();

function download() {
  const blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "tmp.webm";
  a.click();
  window.URL.revokeObjectURL(url);
}

Recorded video

test.webm

[jan-ivar]

Closing, as this repo is for raising issues with the specification, not individual implementations.

Consider asking on https://stackoverflow.com/questions/tagged/mediarecorder-api or file a bug with whichever browser client you're observing this behavior on to see if they're able to fix it.