画布到图像：如何保持比例

Question

这是我的测试代码：http://jsfiddle.net/Zx4fg/

为什么圆圈看起来像画布上的椭圆？

我想将网络摄像头中的快照保存到图像中，但生成的图像不能保持比例。

我的真实代码是：

ctx.drawImage(video,0,0, 300, 150); // 300х150 - with this prop. image 
                                    //from webcam on canvas with true proportions
$('body').append($('<img>').attr('src', canvas.toDataURL()));

我是这样的：

Answer 1

问题在于画布样式，你应该在HTML中设置它的width和height属性。不在CSS

<canvas id="canvas" width="320" height="2400" style="border:1px solid #d3d3d3;">