title: How to make a HTML5 canvas fit dynamic parent/flex box container
body: <p>Is there a way I can create a canvas inside a dynamic re-sizing flex-box container? </p>
  
  <p>Preferably a CSS only solution but I think JavaScript is required for redraw?</p>
  
  <p>I think one solution could be to listen to the re-sizing event and then scale the canvas to meet the size of the flex box parent then force a redraw but I would preferably like to use as much CSS as possible or a more clean/less code solution.</p>
  
  <p>The current approach is CSS based where the canvas is re-sized according to the parent flex box element. The graphics are blurred, re positioned and overflowed from the canvas in the below screenshot.</p>
  
  <p><img src="https://i.stack.imgur.com/ng7zG.png" alt="Stretched image/Graphics overflowing canvas"></p>
  
  <p>CSS:</p>
  
  <pre><code>html,body{
              margin:0;
              width:100%;
              height:100%;
          }
          body{
              display:flex;
              flex-direction:column;
          }
  header{
              width:100%;
              height:40px;
              background-color:red;
          }
          main{
              display:flex;
              flex: 1 1 auto;
              border: 1px solid blue;
              width:80vw;
          }
          canvas{
              flex: 1 1 auto;
              background-color:black;
          }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
  &lt;/header&gt;
  &lt;main&gt;
      &lt;canvas id="stage"&gt;&lt;/canvas&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$( document ).ready(function() {
      var ctx = $("#stage")[0].getContext("2d");
      ctx.strokeStyle="#FFFFFF";
      ctx.beginPath();
      ctx.arc(100,100,50,0,2*Math.PI);
      ctx.stroke();
  });
  </code></pre>
  
  <p>JS fiddle showing the issue: <a href="https://jsfiddle.net/h2v1w0a1/" rel="noreferrer">https://jsfiddle.net/h2v1w0a1/</a></p>