Device orientation redraw canvas

[GoodOldSnoopy]

I've seen this topic and question asked a few times before but I've been unable to find anything that I'm looking for (or I've just not looked good enough).

 

So when I draw my game

 

var w           = window.innerWidth;
var h           = window.innerHeight;

var game = new Phaser.Game(w, h, Phaser.AUTO, document.getElementById('game'));

 

I have a function below that displays an image when the user rotates the device which looks like this

 

window.addEventListener('orientationchange', doOnOrientationChange);

function doOnOrientationChange() {
    if(/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        switch(window.orientation) {
            case -90:
            case 90:
                w = window.innerWidth;
                h = window.innerHeight;
                portraitDiv.className += " portrait_hide";
                game.state.start('boot');
                break;
            default:
                w = window.innerWidth;
                h = window.innerHeight;
                portraitDiv.className += " portrait_display";
                break;
        }
    } else {
        game.state.start('boot');
    }
}

The thing is, I display and hide the image based on the device orientation fine, but I need to pause the game and update the width and height variables and redraw the canvas without refreshing the whole game.

 

Does anyone know how I might do this?

 

Thaks