我正在尝试使用getUserMedia从用户的网络摄像头拍摄照片。
从摄像头传来的图像是640 x480（根据用户的摄像头，可能是任何大小）。
我有一个video标签，大小为320 x240，使用CSS，我在上面渲染网络摄像头图像，如下所示：

var $video = $('video');
navigator.getUserMedia({ video: true }, function (stream) {
    $video[0].mozSrcObject = stream;
    $video[0].play();
    localMediaStream = stream;
}, function () {
    console.log('sadtrombone.com');
});

这个很好用。
然后，我拍下这样的照片/静止画面：

var ctx = $canvas[0].getContext('2d');
ctx.drawImage($video[0], 0, 0, $canvas[0].width, $canvas[0].height);

这会将图像绘制到画布上，但看起来有点模糊：/
那么，如果我这样做：

$('img).attr('src', $canvas[0].toDataURL('image/png'));

这会把画布渲染成一个图像元素，但是图像被压扁了，它是300 x150。
$canvas[0].width == 300和$canvas[0].height == 150
这是怎么回事？

更新

有趣/奇怪的是，如果我这样做：

ctx.drawImage($video[0], 0, 0, 320, 240);

最后我还是得到了一张300 x150的图片，但是它被裁剪了，虽然它看起来和源代码中的长宽比一样。

更新2

更奇怪的是，如果我这么做：

ctx.drawImage($video[0], 0, 0, 640, 480);

我仍然得到了一个300 x150的图像，但它是图像的左上角。