html5画线有关问题 _HTML/CSS

html5画线问题
为什么在画布上画的线横着或竖着的线总是比斜着画的线要粗？？？？
声明下：我把他们的线宽都设置为了1的。
如果说是计算机矩阵排列问题，那为什么cavas的边框又是那么细呢，宽度同样是1！

------解决方案--------------------
canvase的width、height与它的style里的width、height是等比例
比较一下：

HTML code

<!doctype>
<html>
<head>
<style type="text/css">
#canvas1{width:200px;height:200px;}
</style>
<script type="text/javascript">
function A(){
    var canvas=document.getElementById('canvas1');
    var context=canvas.getContext('2d');
    context.moveTo(20,20);
    context.lineTo(120,20);
    context.lineTo(120,120);
    context.lineWidth=2;
    context.stroke();
}
</script>
</head>
<body onload="A()">
<canvas id="canvas1" width="200px" height="200px"/>
</body>
</html>