Html5 canvas drawImage stretched

Question

I tried to draw image on html5 canvas . The issue is image stretched in canvas

load('img_the_scream',
    'http://www.w3schools.com/tags/img_the_scream.jpg',
    function( img ){
        console.log(  img.width , img.height );
        ctx.drawImage( img, 10, 10 , img.width , img.height );
    }
);

I added this issue in http://jsfiddle.net/75rAU/

Answer 1

That is because you modified the canvas size in CSS. The canvas has two separate size : The HTML size (the one you put inside the canvas tag) and the css size, which is actually a rescaling of the canvas. The HTML size is the size you control (when you draw, it uses this size) and the CSS size is the displayed size which is a rescaling of the HTML size.

So here, your canvas has the default size (which I don't remember) but is resized (and stretched) by the css

HTML :

<canvas id="cv" width="350" height="350"></canvas>

CSS :

 #cv {
    background:#ff0;
}

Here I updated your fiddle with the correct size assignation

Answer 2

Canvas has it's own sizes. 300x150 at default. Styles (width/height) just stretch canvas like any image. So, you should strongly set sizes to what you want. You may do it through html <canvas width="123" height="123"></canvas> or from JS code canvas.width = canvas.height = 123. Also, here you may set sizes by image properties canvas.width = img.width etc.

So, look at jsfiddle: http://jsfiddle.net/75rAU/3/ It works well

Little upd: http://jsfiddle.net/75rAU/4/ — this may help too