HTML5画布绘制矩形 - 有差异宽度的边界？

方形边框的结果是不同的宽度，看起来右边框和下边框的宽度比左边和上边框的宽度宽2倍。为什么这么奇怪？我希望各方的边界具有相同的宽度。HTML5画布绘制矩形 - 有差异宽度的边界？

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>HTML5 Test</title> 
<script type="text/javascript"> 
    function draw() { 
    var canvas = document.getElementById('rectangle'); 
    var ctx = canvas.getContext('2d'); 

    ctx.save(); 
    ctx.lineWidth = 30; 
    ctx.fillStyle = "black"; 
    ctx.fillRect(0,0,100,100); 
    ctx.strokeStyle = "red"; 
    ctx.strokeRect(0,0,100,100);   
    ctx.restore(); 
    } 
</script> 
</head> 

<body onload="draw()"> 
<canvas id="rectangle"></canvas> 
</body> 
</html>

enter image description here