kineticjs, should stage.setWidth(), stage.setHeight() and stage.draw(); resize everything? - resize

Question

Im trying to resize everything on window resize.
I have this function but only seems to resize one layer ( graphLayer.add(drawGraph);)
I thought the code below should resize everything??
function onResize(){
var widowWidth = (window.innerWidth) -yPadding; // width - the padding
var widowHeight = (window.innerHeight) -xPadding; // Height - the padding
stage.setWidth((window.innerWidth) -yPadding);
stage.setHeight((window.innerHeight) -xPadding);
stage.draw();
}
here is a the basics of my code
$(window).resize(onResize);
var graph;
var graphLayer = new Kinetic.Layer();
var BubbleLayer = new Kinetic.Layer();
var tooltipLayer = new Kinetic.Layer();
var widowWidth = (window.innerWidth) -yPadding; // width - the padding
var widowHeight = (window.innerHeight) -xPadding; // Height - the padding
var stage = new Kinetic.Stage({
container: 'graph',
width: widowWidth, // width - the padding
height: widowHeight, // Height - the padding
});
var tooltip = new Kinetic.Label({
opacity: 0.75,
visible: false,
listening: false
});
tooltip.add(new Kinetic.Tag({
.........
}));
tooltip.add(new Kinetic.Text({
.........
}));
var drawGraph = new Kinetic.Shape ({
sceneFunc: function(ctx){
.........
}
ctx.fillStrokeShape(this);
},
stroke: 'black',
strokeWidth: 1
});
var drawGraphquarter = new Kinetic.Shape ({
sceneFunc: function(ctx){
.........
}
},
stroke: 'red',
strokeWidth: 3
});
// build data
$.getJSON( "bubble_data.json", function( data ) {
$.each( data.projects, function(i) {
var bubbleData = [];
.........
bubbleData.push({
.........
});
.........
for(var n = 0; n < bubbleData.length; n++) {
addBubble(bubbleData[n], BubbleLayer);
stage.add(BubbleLayer);
}
});
graphLayer.add(drawGraph);
graphLayer.add(drawGraphquarter);
stage.add(BubbleLayer);
stage.add(graphLayer);
graphLayer.moveToBottom();
tooltipLayer.add(tooltip);
stage.add(tooltipLayer);
});
});
// add bubles to layer
function addBubble(obj, BubbleLayer) {
var bubble = new Kinetic.Shape({
sceneFunc: function(ctx) {
.........
});
BubbleLayer.add(bubble);
}
// calendar quarter
function getQuarter(d) {
.........
}
function onResize(){
var widowWidth = (window.innerWidth) -yPadding; // width - the padding
var widowHeight = (window.innerHeight) -xPadding; // Height - the padding
stage.setWidth((window.innerWidth) -yPadding);
stage.setHeight((window.innerHeight) -xPadding);
stage.draw();
}

Answer 1

Updated my code to this.
var graph;
var xPadding = 10;
var yPadding = 10;
var graphLayer = new Kinetic.Layer();
var graphLayerQuater = new Kinetic.Layer();
var BubbleLayer = new Kinetic.Layer();
var tooltipLayer = new Kinetic.Layer();
var widowWidth = (window.innerWidth) -yPadding; // width - the padding
var widowHeight = (window.innerHeight) -xPadding; // Height - the padding
var stage = new Kinetic.Stage({
container: 'graph',
width: widowWidth,
height: widowHeight,
});
var initialScale = stage.scale(); //returns {x: 1, y: 1}
var initialWidth = (window.innerWidth) -yPadding; // width - the padding
var initialHeight = (window.innerHeight) -xPadding; // Height - the padding
onresize function
window.onresize = function(event) {
var width = (window.innerWidth) -yPadding;
var height =(window.innerHeight) -xPadding;
var xScale = (width / initialWidth) * initialScale.x;
var yScale = (height / initialHeight) * initialScale.y;
var newScale = {x: xScale, y: yScale};
stage.setAttr('width', width);
stage.setAttr('height', height);
stage.setAttr('scale', newScale );
stage.draw();
}