HTML5 Kanvas Çizimi Rect - Diff Genişliğinin Sınırı Var Mı?

Kare kenarlık sonucu farklı genişlikte çıkıyor, sağ ve alt kenarın genişliği soldan ve üst kenarın genişliğinden 2 kat daha geniş görünüyor. Neden bu kadar garip? Her iki tarafın sınırlarının aynı genişliğe sahip olmasını istiyorum.HTML5 Kanvas Çizimi Rect - Diff Genişliğinin Sınırı Var Mı?

<!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>

sizin sınır üst ve solda kesilmiş ediliyor çünkü tuval başlar nerede çünkü,, ve

enter image description here