为什么canvas 同时被设定width和height后，画出的矩形大小不形状对呢？

悬赏园豆：5 [已解决问题] 解决于 2015-07-17 11:31

这样的效果是什么原理导致的呢？

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
       canvas{
           margin: 0;
           padding: 0;
           display: inline-block;;
       }
       #draw1{
           border:solid 5px rgba(47, 72, 202, 0.35);
           width: 300px;
           height: 300px;
       }

       #draw2{
           border:solid 5px rgba(189, 42, 97, 0.35);
       }
   </style>
</head>
<body>
<section>
   <canvas id="draw1"></canvas>
   <canvas id="draw2"></canvas>
</section>
</body>
</html>
<script type="text/javascript">
   // 蓝色框
   var canvas1 = document.getElementById("draw1");
   var context1 = canvas1.getContext("2d");
   context1.fillStyle = "#16BFF0";
   context1.fillRect(0,0,100,100);

   //红色框
   var canvas2 = document.getElementById("draw2");
   var context2 = canvas2.getContext("2d");
   context2.fillStyle = "#16BFF0";
   context2.fillRect(0,0,100,100);
</script>