HTML5 drawImage的问题
请看下面这段代码，很简单，就是在canvas上画一个图片，宽度和高度应该相等都是100，但为什么显示出来的就完全不一样呢？画出来的图片，宽度是100，但高度就长了很多，这是什么原因呢？

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

  var img = new Image();
  img.onload = function () {
  context.drawImage(img, 0, 0, 100, 100);
  };
  img.src = "/Content/themes/home/images/Hydrangeas.jpg";
  }
</script>

<h2>HTML5LoadImage</h2>

<button id="btn1" type="button" onclick="OnClick();" value="click">Click</button>
<br />
<br />
<canvas id="canvas1" style="background-color:Yellow; width:500px; height:500px; ">
</canvas>

<br />


------解决方案--------------------
换成这样，来体会一下

<canvas id="canvas1" width="150" height="150" style="background-color:Yellow; width:500px; height:500px; ">
</canvas>