title: Update HTML canvas width and height attributes automatically
body: <p>I want to use HTML5 canvas with flexbox. I need to set canvas.width and canvas.height automatically when user resizes window. I have tried to use jQuery for it:</p>
  
  <pre><code>$(".cnvs").attr("width", $(".cnvs").width());
  $(".cnvs").attr("height", $(".cnvs").height());
  </code></pre>
  
  <p>but it keeps increasing actual width of canvas so it almost fills entire screen. I have put <a href="https://jsfiddle.net/h4hthyck/" rel="nofollow">it on jsfiddle</a> - try to resize output window with separator.</p>
  
  <p>Is there any reasonable way how to do it? Thanks.</p>
  
  <p>Edit: Just to be clear: I don't want to fill entire screen with that canvas. I want UI where I have:</p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;div class="control"&gt;&lt;/div&gt;
     &lt;canvas&gt;&lt;/canvas&gt;
     &lt;div class="control"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then use flexbox to put those three elements beside eachother, while <code>canvas</code> will be twice as wide as the other. This works without problem, but canvas.width and canvas.height doesn't get updated, so whenever I render something onto that canvas, it is rendered as if that canvas was 320x140 px.</p>
  
  <p>Edit 2: I am sorry, but (perhaps because of my poor English) I am not clear enough. I will try to explain it once again:</p>
  
  <p>Actual width of canvas element is correct (even without using any JavaScript code) only by using flexbox. My problem is that although width is correct (and <code>$(".cnvs").width()</code> returns correct value of width), it doesn't have any "width" attribute, it is still:</p>
  
  <pre><code>&lt;canvas&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>and I need to provide width argument by myself (because it renders badly when it's not set). When I try to use my code or proposed:</p>
  
  <pre><code>...
  var rect = canvas.parentNode.getBoundingClientRect();
  canvas.width = rect.width;
  canvas.height = rect.height;
  ...
  </code></pre>
  
  <p>it behaves weirdly, canvas's width keeps increasing with every resize, but too much (it erases both control divs almost immediately).</p>