P5 canvas position on device orientation change


I’m working on a browser game and I’ve just extended functionality to mobile browsers.

I’m having some trouble reigning in the canvas position after a device orientation change (i.e. flipping your phone from portrait to landscape)

I experimented with the deviceTurned method, but it did not seem to execute in chrome on an iphone.

I settled on the idea of adding an event listener for the flip and calling my windowResized function, but the effect is still less than desired (satisfactory in safari, chrome portrait not so much).

The game is live at leverkuhn.app if you’d like to see what I’m talking about.

Any ideas on the best approach to this problem?

event listener:

      window.addEventListener("orientationchange", function(event){


        padding: 0;
        margin: 0;
        background-color: rgb(53,53,53);
        justify-content: center;
        align-items: center;

Hey odotdotdot,

amazing Game you have there!

I also have trouble with deviceOrientation changes, sometimes it triggers, sometimes not, everthing is very weird…

Have you found a solid solution for this problem yet?