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.
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 div
with overflow: auto
, so I can scroll when a longer legend appears).
But I know the last pixel Y-position after I draw every element. Is it possible to somehow trim the remaining space or force adjust canvas size?
Edit: code
<div class="legend">
some stuff here
<div id="canvas">
<canvas id="cv"></canvas>
</div>
</div>
#canvas {
width: 100%;
max-height: 100%;
}
And I set #canvas
height using:
document.getElementById('canvas').style.height = finalSize
after knowing the total height.