How to expand canvas without deforming the content?

Question

How can I expand canvas to occupy the full width and height of the window using, but maintaining an internal proportion not to deform what is designed in canvas?

I want to do something similar to `Phaser.Scale.EXPAND` that is in Phaser 3, to that when the window is resized the game does not deform. I am using the following logic, however, the content is still deformed:

```javascript
function expand(width, height) {
const aspectRatio = width / height; // Fixed proportion of canvas
let auto;

// Calculates the auto value based on the proportion
if (window.innerWidth < window.innerHeight) {
auto = Math.round(window.innerWidth / aspectRatio); // Adjusts the height to maintain the proportion
this.canvas.width = width;
this.canvas.height = auto;
} else {
auto = Math.round(window.innerHeight * aspectRatio); // Adjusts the width to maintain the proportion
this.canvas.width = auto;
this.canvas.height = height;
}

this.canvas.style.width = `${window.innerWidth}px`;
this.canvas.style.height = `${window.innerHeight}px`;
}

const width = window.innerWidth;
const height = window.innerHeight;

window.addEventListener('resize', () => {
expand(width, height)
});
```

Answer 1

Let's say that your canvas gets the right size for every screen, what happens to all of your elements in each size canvas?
Do they maintain the same size/scale/ratio? Do you add new/different layouts or sizes?