JavaScript Canvas drawImage déforme mon image - javascript, image, canvas, stretch, drawimage

Quoi que j’essaie, je ne comprends pas pourquoi drawImage étire une image verticalement. Voici le code:

<canvas id="canvas" style="padding:0;border:0;margin:0 auto;
width:320px;height:456px;z-index:0;"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var d = new Image
d.src = "./images/portadilla.jpg";
d.onload = function a(){context.drawImage(d, 0, 0);}
</script>

Mon image mesure 456 pixels de haut et 320 pixels de large, comme pour la toile. J’ai essayé d’utiliser différents formats et images, mais le problème persiste. Comment voulez-vous résoudre ce problème?

Réponses:

Parce que vous "ne définissez pas correctement la taille de la toile. N'utilisez pas CSS / style pour définir la taille, mais utilisez ses attributs:

<canvas id="canvas" width=320 height=456 style="..."></canvas>

Votre image est étirée car la taille par défaut du bitmap pour un élément de zone de dessin, 300 x 150 pixels, donc si vous ne définissez pas correctement la taille de la zone de dessin bitmap sera étiré pour s'adapter à la élément taille définie avec CSS.

Vous pouvez également définir la taille en utilisant JavaScript:

var canvas = document.getElementById("canvas");
canvas.width = 320;
canvas.height = 456;