title: Canvas is stretching using drawImage
body: <p>I am aware of having to set the size of a <code>&lt;canvas&gt;</code> element using the <code>width</code> and <code>height</code> attribute to avoid stretching. I have no CSS applied to it other than background-color.</p>
  
  <p>I am using <code>ctx.drawImage()</code> to show a video. <strong>The weird thing is, my <code>640x480</code> video plays fine and is not stretched. It is only happening on my <code>640x360</code> videos for now.</strong></p>
  
  <p>I have created an angular directive that draws video onto a canvas element and it all works except for the stretching. Here is my code that draws the video element onto the canvas:</p>
  
  <pre><code>scope.renderPlayer = function()
  {
    var $this = this;
    attributes.width = player.videoWidth;
    attributes.height = player.videoHeight;
    canvas.setAttribute('width', attributes.width);
    canvas.setAttribute('height', attributes.height);
  
    (function loop()
    {
      if (!$this.paused &amp;&amp; !$this.ended)
      {
        ctx.drawImage($this, 0,0, attributes.width, attributes.height);
        setTimeout(loop, 1000/30);
      }
    })();
  };
  player.addEventListener('play', scope.renderPlayer);
  </code></pre>
  
  <p>I assure you the source of the videos don't have that stretching artifacting on the bottom as shown in the image below (You can really see the pixels stretched on the bottom right). My initial width and height of the canvas element is 640x480 and it will change depending on the size of the loaded video.</p>
  
  <p><a href="https://i.stack.imgur.com/tlxE3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tlxE3.jpg" alt="stretching at the bottom"></a></p>