Scale your KineticJS game dynamically

HTML

<script src="http://cdn.jsdelivr.net/kineticjs/5.1.0/kinetic.min.js"></script>
<div id="stage"></div>

CSS

html, body, #stage { width: 100%; height: 100%; }
body { margin: 0; padding: 0; overflow: hidden; }
.kineticjs-content { display: block !important; }

JavaScript

// Fixed stage size
var SCENE_BASE_WIDTH = 800
var SCENE_BASE_HEIGHT = 600

// Max upscale
var SCENE_MAX_WIDTH = 1024
var SCENE_MAX_HEIGHT = 768

// Setup stage
var stage = new Kinetic.Stage({
    container: 'stage',
    width: SCENE_BASE_WIDTH,
    height: SCENE_BASE_HEIGHT
});

// Setup layer
var layer = new Kinetic.Layer();
layer.add(new Kinetic.Rect({
    width: SCENE_BASE_WIDTH,
    height: SCENE_BASE_HEIGHT,
    fill: 'green'
}));

// add layer to stage
stage.add(layer);

// Resize handler
function resizeStage() {
    // Get kinetic stage container div
    var container = stage.container();
    
    // Get container size
    var containerSize = {
        width: container.clientWidth,
        height: container.clientHeight
    };
    
    // Odd size can cause blurry picture due to subpixel rendering
    if(containerSize.width % 2 !== 0) containerSize.width--;
    if(containerSize.height % 2 !== 0) containerSize.height--;
    
    // Resize stage
    stage.size(containerSize);

    // Scale stage
    var scaleX = Math.min(containerSize.width, SCENE_MAX_WIDTH) / SCENE_BASE_WIDTH;
    var scaleY = Math.min(containerSize.height, SCENE_MAX_HEIGHT) / SCENE_BASE_HEIGHT;
    
    var minRatio = Math.min(scaleX, scaleY);
    var scale = { x: minRatio, y: minRatio };
    
    stage.scale(scale);
    
    // Center stage
    var stagePos = {
        x: (containerSize.width - SCENE_BASE_WIDTH * minRatio) * 0.5,
        y: (containerSize.height - SCENE_BASE_HEIGHT * minRatio) * 0.5
    };
    
    stage.position(stagePos);
    
    // Redraw stage
    stage.batchDraw();
    console.log(stage);
}

// Initially resize stage
resizeStage();

// Add event listeners to resize stage
window.addEventListener('resize', resizeStage);
window.addEventListener('orientationchange', resizeStage);

//
// Add some images to scene
//
var lion = new Image();
var monkey = new Image();

function addAnimalAt(x, y) {
    return function () {
        var animal = new Kinetic.Image({
           ...