CODEWITHSUNDEEP
htmlcanvaswebcam
Nikoole
Nikoole

Reputation: 4603

Canvas to image: how to keep proportions

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:

Upvotes: 2

Views: 824

Answers (1)

Fatima Zohra
Fatima Zohra

Reputation: 2967

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;">

Upvotes: 5

Related Questions