0

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.

1
  • As resizing the canvas will clear its content first draw the items on a temporary canvas, adjust the size of the visible canvas and then draw the content of the temporary canvas in the visible one.
    – Andreas
    Oct 20, 2017 at 8:29

2 Answers 2

2

If you're already holding the canvas in a div for overflow, you could just adjust the div height based on list length. It'd be easier (and cheaper on resources) to obscure the part you don't need, rather than draw the canvas all over again. Depending on your use case, the canvas might even be totally unnecessary (it could be more efficient to just prerender a few key aspects, i.e. use images), but I can't say any more on that without additional details.

4
  • This sounds reasonable. I tried to limit the div with JS after knowing the total height, however it looks like this: i.imgur.com/GAsl1D9.png And it's the size of canvas that makes it, I can see it when I change it's hardcoded height value.
    – adamczi
    Oct 20, 2017 at 9:19
  • It's a little difficult to see what you're saying, here. If the scrollbar is the problem, just turn off overflow when your list is small.
    – revereche
    Oct 20, 2017 at 9:40
  • Got it. Added overflow: hidden into #canvas CSS to just cut the too-long-div. Thanks!
    – adamczi
    Oct 20, 2017 at 9:40
  • No problem! Accept my answer if you found it helpful ;)
    – revereche
    Oct 20, 2017 at 9:41
1

It is not possible to resize a canvas not clearing all its content.

As a workaround I can suggest to create 2nd canvas to keep the content of main one while you resize it.

const mainCanvas = ...;
const mainCtx = mainCanvas.getContext('2d');

const hiddenCanvas = document.createElement('canvas');
const hiddenCtx = hiddenCanvas.getContext('2d');

function render() {
    // render the list and keep last Y position

    // copy content of main canvas to the 2nd one
    hiddenCanvas.width  = mainCanvas.width;
    hiddenCanvas.height = mainCanvas.height;
    hiddenCtx.drawImage(mainCanvas, 0, 0);

    // resize main canvas and restore its content
    mainCanvas.height = lastYPosition;
    mainCtx.drawImage(hiddenCanvas, 0, 0);
}

Edit:

As pointed out in comments: you can even render the list directly to the 2nd canvas.

const mainCanvas = ...;
const mainCtx = mainCanvas.getContext('2d');

const hiddenCanvas = document.createElement('canvas');
const hiddenCtx = hiddenCanvas.getContext('2d');

function render() {
    // render the list on hidden canvas
    // and keep last Y position

    // resize and copy
    mainCanvas.width = hiddenCanvas.width;
    mainCanvas.height = lastYPosition;
    mainCtx.drawImage(hiddenCanvas, 0, 0);
}
1
  • Thank you for the idea - I tried it but found the "CSS method" faster to get working. I think the other one is also more efficient (no drawing twice). This will certainly find it's usage in some cases though. Thanks!
    – adamczi
    Oct 20, 2017 at 9:46

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.