title: How can an element of a fixed size (canvas) be resized in a flex container?
body: <p>An HTML canvas element can be automatically resized by the dynamics of a HTML page: Maybe because its style properties are set to a percentage value, or maybe because it is inside a flex container.
  Thereby the content of the canvas gets resized as well: Because of the interpolation the canvas content looks blurred (loss of resolution).</p>
  
  <p>In order to keep the resolution to the maximum, one must render the canvas content based on the current pixel size of the element.</p>
  
  <p>This fiddle shows how this can be done with the help of the function getComputedStyle: <a href="https://jsfiddle.net/fx98gmu2/1/" rel="nofollow">https://jsfiddle.net/fx98gmu2/1/</a></p>
  
  <pre><code>setInterval(function() {
    var computed = getComputedStyle(canvas);
    var w = parseInt(computed.getPropertyValue("width"), 10);
    var h = parseInt(computed.getPropertyValue("height"), 10);
  
    canvas.width = w;
    canvas.height = h;
  
    // re-rendering of canvas content...
  }, 2000); // intentionally long to see the effect
  </code></pre>
  
  <p>With a setTimeout function I'm updating the width and height of the canvas to the computed values of these properties.</p>
  
  <p>As the fiddle shows, this works only when increasing the size of the window. Whenever the window size gets decreased, the canvas (item of the flexbox) stays fixed.</p>