Question

I am starting three (or more) Kinetic.Stages on a webpage. When I start my first stage alone, it works as normal.

But, when I start any stage afterwards, the first call to frame.timeDiff in onFrame() returns a huge value (one million, million).

What could be causing this?

window.onload = function() {
    var stage1 = new Kinetic.Stage({
        container: "widget1",
        width: 10,
        height: 10
    });

    stage1.onFrame(function(frame) {
        console.log(frame.timeDiff);
    }

    stage1.start();


    var stage2 = new Kinetic.Stage({
        container: "widget2",
        width: 10,
        height: 10
    });

    stage2.onFrame(function(frame) {
        // empty
    });

    stage2.start();


    var stage3 = new Kinetic.Stage({
        container: "widget3",
        width: 10,
        height: 10
    });

    stage3.onFrame(function(frame) {
        // empty
    });

    stage3.start(); 
};

As long as only one stage is started, it works as normal, but as soon as any other stage is started as well, the frame time becomes huge. Re-arranging the starts and initialisations does not change anything.

Answer 1

Are you using Chrome? I experienced problems when going between tabs in chrome. (the frame.timeDiff became huge. Since Chrome doesint pause the javascript (i think).

I solved this by adding: var timeDiff = Math.min(frame.timeDiff, 50);

Hope this is to any help