title: Make canvas fill include stroke in shapes
body: <p>Ok, so i am making a 3D rendering engine in pure javascript, as a challenge of course - to test my linear algebra skills. I am not using webgl, so please do not say "use webgl".</p>
  
  <p>Anyways, the <em>software</em> will take in triangles, a camera and local transformations, and render the data onto the screen (i even made it interactive)</p>
  
  <p>There are only 6 lines of rendering code, however, which are:</p>
  
  <pre><code>// some shading and math calculations then this:
  context.fillStyle = color;
  context.strokeStyle = color;
  context.beginPath();
  context.moveTo(x0, y0);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineTo(x0, y0);
  context.closePath();
  context.fill();
  context.stroke();
  </code></pre>
  
  <p>And while that works, it drops to 10fps with 4k+ faces on my Chromebook. (60fps on a <em>regular</em> computer)</p>
  
  <p>Anyways, that outputs this:</p>
  
  <p><a href="https://i.stack.imgur.com/AkeOZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AkeOZ.png" alt="*Dragon Rendered 3D*"></a></p>
  
  <p>But to make it faster, and because canvas state changes are slow, i removed the stroke, making the rendering code:</p>
  
  <pre><code>// some shading and math calculations then this:
  context.fillStyle = color;
  //context.strokeStyle = color;
  context.beginPath();
  context.moveTo(x0, y0);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineTo(x0, y0);
  context.closePath();
  context.fill();
  //context.stroke();
  </code></pre>
  
  <p>which runs twice as fast, but the resulting thing that gets rendered to the screen is this: <em>(different model)</em></p>
  
  <p><a href="https://i.stack.imgur.com/fdK9U.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fdK9U.png" alt="*bunny*"></a></p>
  
  <p>which has ugly lines everywhere at the edges of the triangles (which get removed when I re-add the stroke)</p>
  
  <p>However, the fps doubles and performance gains are great...</p>
  
  <p>So i believe the lines are caused because the canvas fill doesnt include the area where it would have stroked (the <em>outline</em>, as you may say).</p>
  
  <p>I have tried to fix it with math, and although it works there are some edge cases where it doesn't</p>
  
  <p><em>So my question is as follows</em>:
  <strong>Is there a way to make the context fill include the stroke area without <em>stroking</em>, because it is very expensive?</strong></p>