title: HTML5 Canvas Draw Rect - Got Border of Diff Width?
body: <p>The result of the square border turns out to be different width, it seems that the right and the bottom border's width is 2x wider than the left and the top border's width. Why so weird? I want the border of all sides to have the same width.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;HTML5 Test&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
    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();
    }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="draw()"&gt;
  &lt;canvas id="rectangle"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/e1Mvi.png" alt="enter image description here"></p>