Html5 canvas drawImage tendu

J'ai essayé de dessiner une image sur html5 canvas . La question de l'image est étirée en toile

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

J'ai ajouté cette question dans http://jsfiddle.net/75rAU/

OriginalL'auteur rab | 2013-05-11

  1. 29

    C'est parce que vous avez modifié la taille du canevas en CSS.
    La toile a deux distincts de taille : dans Le code HTML de taille (celle que vous avez mis à l'intérieur de la balise canvas) et le css de la taille, qui est en fait une mise à l'échelle de la toile.
    Le HTML est la taille de la taille que vous contrôlez (lorsque vous dessinez, il utilise cette taille) et le CSS taille est la taille qui est un changement d'échelle de l'HTML de la taille.

    Donc, ici, votre toile a la taille par défaut (dont je ne me souviens pas) mais est redimensionnée (et tendu) par le css

    HTML : 

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

    CSS : 

     #cv {
    background:#ff0;
}

    Ici, je mise à jour de votre violon avec la bonne taille assignation

    OriginalL'auteur Malharhak

  2. 2

    Toile a sa propre taille. 300x150 en cas de défaut. Styles (largeur/hauteur) il suffit de les étirer canvas comme une image. Donc, vous devriez fortement de la taille de ce que vous voulez. Vous pouvez le faire via html <canvas width="123" height="123"></canvas> ou de code JS canvas.width = canvas.height = 123. Aussi, vous pouvez définir ici les tailles par les propriétés de l'image canvas.width = img.width etc.

    Alors regardez jsfiddle: http://jsfiddle.net/75rAU/3/
    Il fonctionne bien

    Peu upd: http://jsfiddle.net/75rAU/4/ — cela peut aussi aider

    OriginalL'auteur Novelist