If I have

<div container>
<my html overlay>
<my game canvas>

The canvas has left: 0; top: 0; width:100%; height:100%; position: relative;. The div container is a certain width and height that adjusts to aspect ratio based on when the user resizes the screen. On resize I set the official size of the canvas (in three.js, renderer.setSize) to the same size to match it up.

This works fine, but then how do I get the html overlay to match the same position it has, over the canvas, when adjusting the size (based on keeping the aspect ratio and scaling in general)?

I think I have to use css scale, but need help in determining what to base the scale factor on.

  • \$\begingroup\$ As far as I can tell, this has nothing to do with game development. You might want to ask this question on StackOverflow or similar platforms. \$\endgroup\$
    – loptrinho
    Commented Oct 21, 2023 at 17:07


You must log in to answer this question.

Browse other questions tagged .