I used mediarecorder to record a render created using matter.js and p5.js, but the video turned out like this.

How would I fix this? I've already tried setting the bitrate arbitrarily high.

I used the example code:

let canvas = document.getElementById('defaultCanvas0');
videoStream = canvas.captureStream(fps);
mediaRecorderv = new MediaRecorder(videoStream);
chunks = [];
console.log(mediaRecorderv.videoBitsPerSecond)
mediaRecorderv.ondataavailable = function(e) {
    chunks.push(e.data);
};
mediaRecorderv.onstop = function(e) {
    let blob = new Blob(chunks, { 'type' : 'video/mp4' });
    chunks = [];
    let videoURL = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = videoURL;
    link.download = 'render.mp4';
    document.body.append(link);
    link.click();
    link.remove();
};
mediaRecorderv.start();