Question

I currently have an HTML page running a full screen canvas element. In this canvas element, I have various things drawing that fill up the page. As the page is resized, the things drawn are adjusted in size in order to fill the screen. However, once a certain minimum size is reached, the things drawn are no longer adjusted, and instead, I add overflow scrollbars to the page.

Right now, I’m trying to add a new element over the canvas that is permanently fixed to a position relative to the bottom right corner of the canvas. Giving the div a css styling of postion:absolute; works fine while the canvas is rescaling. However, as soon as the page crosses that minimum size and the canvas no longer rescales, and instead scroll bars appear, the new div keeps moving with the viewable window, instead of staying where it should be relative to the canvas. I’ve played around with using postion:fixed; (replacing the css with jquery) once the size is small enough, but that doesn’t seem to be working either.

Does anybody have any suggestions?

Best,
Sami

Answer 1

contain the canvas in a container div i.e

<div class="canvas_container">
    <canvas></canvas>
    <div class="positioned_element"></div>
</div>

and in your CSS

.canvas_container{position:relative;}
.positioned_element{position:absolute;bottom:0;right:0;}

This will make the positioned element go to the right/bottom of the parent “.canvas_container” and not the body of the site.