title: HTML 5 Canvas drawImage is droping the quality of orginal video
body: <p>I wanted to display same video in two area of the application. So using canvas its working fine but the quality of original video is getting dropped but canvas video quality is fine.</p>
  
  <pre><code>var canvas = document.getElementById('shrinkVideo');
  var context = canvas.getContext('2d');
  var video = document.getElementById('mainVideo');
  
  video.addEventListener('play', () =&gt; {
              // canvas.width = 270;
              // canvas.height = 480;
             this.draw(video, context, canvas.width,canvas.height);
          }, false);
  
     draw(v, c, w, h) {
          if (v.paused || v.ended) return false;
          c.drawImage(v, 0, 0, w, h);
          setTimeout(this.draw, 20, v, c, w, h);
      }
  </code></pre>
  
  <p>This is my code to sync two video's and it is working fine but 'mainVideo' quality gets dropped. </p>
  
  <p>But if I remove all the canvas code and just play 'mainVideo' the quality is maintained but using canvas its quality get dropped.</p>
  
  <p><a href="https://i.stack.imgur.com/rGbu2.png" rel="nofollow noreferrer">Expected Result</a> This is output of the video when canvas code is not added </p>
  
  <p><a href="https://i.stack.imgur.com/nvVAB.png" rel="nofollow noreferrer">Actual Result</a> This is output I am getting after adding the canvas code </p>
  
  <p>Thanks In Advance</p>