JavaScript Canvas drawImage deformuje mój obraz - javascript, image, canvas, stretch, drawimage

Bez względu na to, czego spróbuję, nie mogę zrozumieć, dlaczego funkcja rysowania obrazu rozciąga obraz w pionie. Oto kod:

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

Mój obraz ma 456 pikseli wysokości i 320 pikseli szerokości, tak samo jak płótno. Próbowałem użyć różnych obrazów i formatów, ale problem pozostaje. Jak byś to rozwiązał?

Odpowiedzi:

Ponieważ nie ustawiasz poprawnie rozmiaru obszaru roboczego. Nie używaj CSS / style do ustawienia rozmiaru, ale użyj jego atrybutów:

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

Twój obraz jest rozciągnięty, ponieważ domyślny rozmiar bitmapa element płótna ma 300 x 150 pikseli, więc jeśli nie ustawisz poprawnie rozmiaru płótna bitmapa zostanie rozciągnięty, aby pasował do element rozmiar ustawiony za pomocą CSS.

Możesz także ustawić rozmiar za pomocą JavaScript:

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