title: greenline when rendering video on canvas
body: <p>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 ?</p>
  <p>It happens when the canvas size is smaller than the video resolution!!</p>
  <p>The Code is very simple</p>
  <pre><code>    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);
  </code></pre>
  <p><code>this.video</code> is a <code>MediaStream</code> received from a webcam.</p>
  <p>I am testing on chrome</p>
  <p>UPDATE : Based on <a href="https://stackoverflow.com/users/17531641/coralee">coralee's</a> comment updated to this and it worked :) Most of the time :( But I need a better solution</p>
  <pre><code>      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);
  </code></pre>
  <p>UPDATE 2 : The real problem : Our WebRTC SDK is enabling simulcast and its using vp8 codec <a href="https://en.wikipedia.org/wiki/VP8" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/VP8</a> and therefore the canvas size should be dividable by 4, 8 or 16
  The Solution : <code>Math.round(Math.min(videoWidth, maxSize) / 16) * 16;</code></p>