title: Dynamically adjust canvas size depending on content
body: <p>I have a canvas into which I draw content. The width of the content is constant, but the height changes. This is kind of a list - a map legend. The problem is I don't know how many items will I get beforehand, neither their size. </p>
  
  <p>If I set height to eg. 800 it's fine for longer lists, but for lists that have just a few of elements, it's way too high and a lot of whitespace remains at the bottom, plus an unnecessary scroll (it's placed in <code>div</code> with <code>overflow: auto</code>, so I can scroll when a longer legend appears).</p>
  
  <p>But I know the last pixel Y-position <strong>after</strong> I draw every element. Is it possible to somehow trim the remaining space or force adjust canvas size? </p>
  
  <p>Edit: code</p>
  
  <pre><code>&lt;div class="legend"&gt;
  
      some stuff here
  
      &lt;div id="canvas"&gt;
          &lt;canvas id="cv"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  #canvas {
      width: 100%;
      max-height: 100%;
  }
  </code></pre>
  
  <p>And I set <code>#canvas</code> height using:</p>
  
  <pre><code>document.getElementById('canvas').style.height = finalSize
  </code></pre>
  
  <p>after knowing the total height.</p>