为什么在画布上缩放html5视频模糊＆amp;错误的大小？

Question

在chrome中，我加载一个html5视频并抓取一帧。 然后我将该框架放入画布元素中。 然后我缩放两个元素以使它们变小。 当冻结帧视频和画布重叠时，画布稍微大一点（并且更模糊）。 我做错了什么？

https://codepen.io/jedierikb/pen/ooEqLy

var $v = document.getElementById('video');
var $c = document.getElementById('canvas');
var ctx = $c.getContext('2d');

var cvsVis = true;

$v.addEventListener( 'seeked', function() {

    var vbr = $v.getBoundingClientRect();
    $c.style.width = vbr.width + 'px';
    $c.style.height = vbr.height + 'px';
    $c.width = vbr.width;
    $c.height = vbr.height;
    ctx.drawImage(video, 0, 0, vbr.width, vbr.height);

    TweenMax.set( [$v,$c], {
      scale: .75
    });


    var $t = document.getElementById('toggle');
    $t.addEventListener( 'click', function() {
      cvsVis = !cvsVis;
      $c.style.display = cvsVis ? 'block' : 'none';
    });

});
$v.currentTime = 30;
$v.pause();