HTML5 - toile d'image : comment garder les proportions - Stack Overflow

This my test code: http://jsfiddle.net/Zx4fg/

Why does the circle look like an oval on the canvas?

I want save snapshot from webcam to an image, but the resulting image does not keep proportions.

My real code is:

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()));

And I getting like this:

The problem is in canvas styling, u should set its width and height attribute in HTML. not in CSS

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

This my test code: http://jsfiddle.net/Zx4fg/

Why does the circle look like an oval on the canvas?

I want save snapshot from webcam to an image, but the resulting image does not keep proportions.

My real code is:

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()));

And I getting like this:

The problem is in canvas styling, u should set its width and height attribute in HTML. not in CSS

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

Source