Video + canvas fullscreen issue

Question

I have a video element which is getting copied to a canvas element during the stream.

<div id="video-panel">
    <canvas id="main-canvas" width="640" height="320"></canvas>

    <video id="video-remote" autoplay="autoplay" src=""></video>
    <video id="video-local" autoplay="autoplay" muted="true" src=""></video>
</div>

The issue I'm having is keeping the aspect ratio on fullscreen. Video keeps its ratio, but canvas doesn't.

The CSS part for the code is:

#video-panel {
    width: 100%;
    height: 100%;
}

#video-remote {
    width: 100%;
    height: 100%;
}

#video-local {
    width: 24%;
    position: absolute;
    z-index: 1;
    right: 10px;
    bottom: 10px;
    border: 1px solid white;
}

#main-canvas {
    position: absolute;
    background: url(https://.../image1.png) no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

I am testing out a chroma key effect, and JS part which is being called on video play is:

/////
this.video = document.getElementById('video-remote');
this.canvas = document.getElementById('main-canvas');
this.context = this.canvas.getContext('2d');
////

computeFrame() {
    this.context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
    ...        
    this.context.putImageData(frame, 0, 0);
}

Is there anything I can do to make this work?

Answer 1

<video> element has a defaut object-fit set to contain while <canvas> defaults to fill.

You can set the <canvas> one to the same value to have the same aspect-ratio:

const x = c.getContext('2d'); 
x.fillRect( 125, 50, 50, 50 );
x.strokeRect( 0, 0, 300, 150 );

#c {
  background: ivory;
  width: 100vw;
  height: 100vh;
}
#c:hover {
 object-fit: contain;
}

mouse over the canvas to fix the aspect-ratio
<canvas id="c"></canvas>