Before I start my question, let me clarify that I'm not using <canvas>, I'm using <div id="canvas">, so I'm not using HTML5 Canvas for this game.
I have this div element named canvas that has an aspect ratio of 16 / 9, and I'm trying to place elements inside, but the issue is that the elements inside the canvas either don't change their size, or they get stretched awkwardly. I want to get the elements to fit inside the canvas without warping their size and without moving them out of place. How is this achievable? I'm ok with answers that has a little bit of JavaScript involved.
Here is my window when it is wider than the canvas (this is what I prefer): 
And here it is when the canvas is wider than the window (this is the issue):
// If you go into full screen on this snippet, resize your browser window (Or rotate your device if you are using a phone) and see how the box acts weirdly.body{ font-family: 'SF Intermosaic', sans-serif; margin: 0; padding: 0; background: black; display: flex; justify-content: center; align-items: center; min-height: 100vh; } #canvas{ width: 100%; max-width: calc(100vh * (16 / 9)); aspect-ratio: 16 / 9; background: rgb(255, 255, 255); position: relative; } #opening{ background: darkblue; } .child-element { width: 10ch; /* Change the units to width, height, top, and left values to em, %, vw, and vh to see my issue*/ height: 10ch; background: red; position: absolute; top: 10ch; left: 10ch; } If you go into full screen on this snippet, resize your browser window (Or rotate your device if you are using a phone) and see how the box acts weirdly.<!DOCTYPE html> <html lang="en"> <head> <title>Game</title> </head> <body> <div id="canvas"> <div class="child-element"></div> </div> </body> </html>