KineticJS android stage size

Question

Definining KineticJS Stage I go like this:

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 320,
    height: 480
  });

So width and height of stage are fixed size. How to stretch it to fit on phone screen if resolution is different?

Answer 1

Well, this is really a javascript question. You want to make the size of the stage same as the window size. This worked for me on my android project:

 var stage = new Kinetic.Stage({
      container: 'container',
      width: window.innerWidth,
      height: window.innerHeight
 });

Edit:
Additionally, I recommend you add jQuery as well so you can check for orientation changes, then you can do something like:

window.onresize = function(event) {  //this function will resize your stage to the size of your window
    stage.setWidth(window.innerWidth);
    stage.setHeight(window.innerHeight);
    stage.draw(); //redraw the stage, not sure if really needed, but good to have.
}

or you could do:

window.onresize = function(event) {
    stage.setScale(x,y); //set x, y scale values when the orientation changes
    stage.draw(); //redraw the stage, not sure if really needed, but good to have.
}