Холст HTML5: изменение размера изображения

Я пытаюсь разместить изображение на холсте, не изменяя его размер. Я думал, что drawImage (img, x, y) поможет, но он растягивает изображение, чтобы заполнить холст. Также предоставление drawImage (img, x, y, width, height) с размерами моего изображения, похоже, не работает.

Вот мой код:

<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas>

<script type="text/javascript">

window.onload = function() {
  var canvas = document.getElementById("story");
  var context = canvas.getContext("2d");
  var img = document.getElementById("img1");
  var width = parseInt(img.width);
  var height = parseInt(img.height);
  context.drawImage(img, 0, 0, width, height);
}

</script>
<img id="img1" alt="" src="http://link to image"/>

Заранее спасибо!

PS: Я добавил parseInt's чтобы убедиться, что drawImage получает допустимые значения.

17
задан Markus 12 November 2010 в 16:15
поделиться