Question

I created a canvas element and I’m using javascript to make it as big as possible in the viewport, while maintaining the aspect ratio.

When you rotate the iPad, the device first rotates the page and only after that launches the resize event.

The problem is, if you come from landscape (about 800px wide) to portrait (about 400px), a part of the body is not being displayed, because the resize didn’t happen yet at that moment. After this, the resize event resizes the canvas to the correct size, but then a part of the canvas (& document) is still outside the viewport.

So basically the problem exists because the resize event only launches after the iPad already cut off a part of the body on both sides because the body is too wide.

I could fix this by setting a margin to the canvas to compensate, but it’s a dirty solution… does anyone have a better suggestion?

Answer 1

This could also be considered a dirty solution, but in the past I have used a setTimeout to deal with this issue, and it seems to always be reliable.

window.onorientationchange = function() {
    canvasResize();
}

function canvasResize() {
    window.setTimeout(function () {
        //Your code here based on new size
    }, 100);
}

Or if you are looking for a slightly less dirty solution, you should be able to just keep track of the viewport width yourself, and then wait until that changes to do your updates. Add to your script somewhere:

var viewportWidth = window.innerWidth;

And change canvasResize:

function canvasResize() {     
    if(window.innerWidth != viewportWidth) {//Dimensions have changed for sure
        viewportWidth = window.innerWidth; //Update viewportWidth for future use
        //Your code here based on new size
    }
    else {
        //Delay and try again
        window.setTimeout(function () {
            canvasResize();
        }, 100);
    }
}

Both of are pretty quick and dirty, and I’d be interested if there’s a more elegant solution, but I haven’t found one yet.