<canvas height="50" width="50"></canvas>
<button>Record</button>

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
const recordBtn = document.querySelector("button");

let recording = false;
let mediaRecorder;
let recordedChunks;

recordBtn.addEventListener("click", () => {
  recording = !recording;
  if(recording){
      recordBtn.textContent = "Stop";
      const stream = canvas.captureStream(25);
      mediaRecorder = new MediaRecorder(stream, {
        mimeType: 'video/webm;codecs=vp9',
        ignoreMutedMedia: true
      });
      recordedChunks = [];
      mediaRecorder.ondataavailable = e => {
        if(e.data.size > 0){
          recordedChunks.push(e.data);
        }
      };
      mediaRecorder.start();
    } else {
      recordBtn.textContent = "Record"
      mediaRecorder.stop();
      setTimeout(() => {
        const blob = new Blob(recordedChunks, {
          type: "video/webm"
        });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "recording.webm";
        a.click();
        URL.revokeObjectURL(url);
      },0);
    }
});

//Canvas animation to rotate colors
let hue = 0;

function draw(){
  hue += 1;
  if(hue > 359){
    hue = 0;
  }
  context.clearRect(0, 0, 50, 50);
  context.fillStyle = `hsl(${hue}, 100%, 50%)`;
  context.fillRect(0, 0, 50, 50)
  
  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);