kineticjs resize layer based on stage width - responsive-design

Question

I have a stage that resizes to the container width based on browser width (trying to make my project responsive but struggling). I only have one layer and want the layer to resize based on the size of the stage. As of now the stage width changes with browser width but the layer width doesn't change, just gets cut off
I've tried layer.setScale(x,y) in a window.onresize function but don't have enough math sense to use this to scale the layer as the stage width changes.
I've also tried layer.setWidth(x) and used the stage width as a variable for x in the same function but no luck.
Shouldn't the layer automatically scale with the stage? If I adjust the canvas size in firebug the layer auto scales, but that's the only time I get the correct response...
By the way all the elements are polygons whose coordinates/points/etc are imported via svg/illustrator. Not sure if that has anything to do with the prob...
Totally stuck...
Here's my project: http://cityunite.org/new

Answer 1

There are many ways to approach this problem. I'll just give my suggestion.
You should not set the width of the stage when the browser window size changes, but you should scale instead. When you first load the page, your scale is set at 1, which is (100%). When your window size changes, you should listen for that change and set the scale accordingly.
Something like this:
//save initial scale
var initialScale = stage.scale(); //returns {x: 1, y: 1}
var initialWidth = $("#container").innerWidth(); // initial width
var initialHeight = $("#container").innerHeight(); // initial height
window.onresize = function(event) { // listen for change
var width = $("#container").innerWidth(); // new width of page
var height = $("#container").innerHeight(); // new height of page
console.log(width);
console.log(height);
var xScale = (width / initialWidth) * initialScale.x; // percent change in width (Ex: 1000 - 400/1000 means the page scaled down 60%, you should play with this to get wanted results)
var yScale = (height / initialHeight) * initialScale.y;
var newScale = {x: xScale, y: yScale};
console.log(newScale);
stage.setAttr('width', width);
stage.setAttr('height', height);
stage.setAttr('scale', newScale );
stage.draw();
}