title: Prevent stroke border from overflowing path
body: <p><code>strokeRect (0, 0, canvasWidth, canvasHeight);</code> draws a full rectangle but the line width is cut in half, here is an example:</p>
  
  <pre><code>&lt;canvas&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
      var canvas = document.getElementsByTagName ("canvas");
  
      var lineWidth = 10;
  
      var canvasHeight = canvas[0].height;
      var canvasWidth = canvas[0].width;
  
      var ctx = canvas[0].getContext ("2d");
  
      ctx.lineWidth = lineWidth;
  
      ctx.strokeRect (0, 0, canvasWidth, canvasHeight);
  &lt;/script&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/YtaGO.png" alt="screenshot of problem"></p>
  
  <p>I can fix that but isn't elegant:</p>
  
  <pre><code>&lt;canvas&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
      var canvas = document.getElementsByTagName ("canvas");
  
      var lineWidth = 10;
  
      var canvasHeight = canvas[0].height - lineWidth;
      var canvasWidth = canvas[0].width - lineWidth;
  
      var ctx = canvas[0].getContext ("2d");
  
      ctx.lineWidth = lineWidth;
  
      lineWidth /= 2;
  
      ctx.strokeRect (lineWidth, lineWidth, canvasWidth, canvasHeight);
  &lt;/script&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/thqOj.png" alt="screenshot of inelegant solution"></p>
  
  <p>Is there a native method to do that ? Something like the "box-sizing" css3 attribute:</p>
  
  <pre><code>canvas {
      box-sizing: border-box;
  }
  </code></pre>
  
  <p>Thanks.</p>