Screen.contentArea and canvas seems to get out of sync when resizing window

I might be misunderstanding how to use Screen.contentArea, but it seems that when using a display mode of FitScreenAndFill either the bounds are incorrect or the canvas does not draw positions properly after the window is resized.

Here’s a video of the codesandbox repro below. When I refresh the page, the positions are correct.

https://user-images.githubusercontent.com/8703090/181378639-d6506f19-08eb-443b-8c2b-ed5bb98ed749.mp4

Steps to Reproduce

repro: https://codesandbox.io/s/excalibur-fitscreenandfill-bug-epeb2u?file=/src/index.js

Red box is anchored to top/left of contentArea, while green box represents the entire bounds of contentArea. If you resize the window, they drift from where they should be. If you refresh the page they are in the proper spot, and notice the logged coordinates of the red box are the same before/after the refresh.

If I’m doing anything incorrect please let me know!

Expected Result

Setting an object’s position to bounds of Screen.contentArea should stay consistent after window resize

Actual Result

Positions drift after resize, but are in expected position after refresh using same window dimensions

Environment

• browsers and versions: Chrome 103, also seeing same behaviour on FireFox and Safari
• operating system: macOS 12.4
• Excalibur versions: 0.27
• I am using a device with devicePixelRatio of 2 (macbook pro)

Current Workaround

[mattjennings]

@eonarheim this is awesome! Thanks a ton, this looks like a fantastic solution. Great job!

[mattjennings]

I think that is what I would expect, but this is the first time I’ve ever worked with a dynamic resolution so I’m not sure if that’s the correct expectation 😅. If that’s also what you would expect though, then I think that would be the proper change. I may have also been thrown off by the contentArea being in the screen space like you said, but I think your code snippet there might do the trick. I’ll give it a shot!

In the end, I was looking for a way to consistently anchor to any side of the “safe” area following resize, and that if I refresh the page at those dimensions, it’ll be the same placement. I think what confused me the most was the difference in positions when resizing and then refreshing.