I am rendering a video stream on a canvas, sometime a greenline appears on the side of the rendered video, why ? and how to fix this ?

It happens when the canvas size is smaller than the video resolution!!

The Code is very simple

    let videoConstraints: MediaTrackConstraints;
    if (options) {
      if (!CameraResolutions[options.resolution]) options.resolution = CameraQuality.Auto;
      videoConstraints = {
        deviceId: options.deviceId,
        frameRate: { ideal: 30 },
        // facingMode: options.facingMode,
        width: { ideal: CameraResolutions[options.resolution][0] }, // 720
        height: { ideal: CameraResolutions[options.resolution][1] }, // 720
      };
    }
    const constraints: MediaStreamConstraints = {
      video: videoConstraints ?? true,
      audio: false,
    };

navigator.mediaDevices.getUserMedia(options.constraints);
...
this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);

this.video is a MediaStream received from a webcam.

I am testing on chrome

UPDATE : Based on coralee's comment updated to this and it worked :) Most of the time :( But I need a better solution

      const w = this.canvas.width - 10;
      const h = this.canvas.height - 10;
      const x = 5; // to center the video on canvas
      const y = 5;
      this.ctx.drawImage(this.video, x, y, w, h);

UPDATE 2 : The real problem : Our WebRTC SDK is enabling simulcast and its using vp8 codec https://en.wikipedia.org/wiki/VP8 and therefore the canvas size should be dividable by 4, 8 or 16 The Solution : Math.round(Math.min(videoWidth, maxSize) / 16) * 16;