html5 - How to make KineticJS canvas stage responsive -

when adding canvas element page want canvas , contents scale down browser window scales down.

there seem several questions asked here , each 1 haven't quite found answer looking for. seem have works , thought post others shoot down or improve upon.

in example have page 1000px wide @ max width. canvas element 800px wide @ max width.

html:

<div id="container"></div> 

css:

#container {     background-color: #888888;     display: inline-block;     max-width: 1000px; } 

javascript:

var maxstagewidth = 800; var maxstageheight = 500; var maxpagewidth = 1000;  // check see if window less desired width , calls sizing functions function setstagewidth() {     if (window.innerwidth < maxpagewidth) {          resizestage();      } else {          maxstagesize();      }; };  // sets scale , dimensions of stage in relation window size function resizestage() {      var scalepercentage = window.innerwidth / maxpagewidth;      stage.setattr('scalex', scalepercentage);     stage.setattr('scaley', scalepercentage);     stage.setattr('width', maxstagewidth * scalepercentage);     stage.setattr('height', maxstageheight * scalepercentage);     stage.draw(); };  //sets scale , dimensions of stage max settings function maxstagesize() {     stage.setattr('scalex', 1);     stage.setattr('scaley', 1);     stage.setattr('width', maxstagewidth);     stage.setattr('height', maxstageheight);     stage.draw(); };  var stage = new kinetic.stage({     container: 'container',     width: maxstagewidth,     height: maxstageheight,     scalex: 1 });  var circles = new kinetic.layer();  var circlered = new kinetic.circle({     x: stage.getwidth() / 2,     y: stage.getheight() / 2,     radius: 100,     stroke: 'black',     strokewidth: 2,     fill: 'red' });  var circleblue = new kinetic.circle({     x: stage.getwidth() / 2 + 120,     y: stage.getheight() / 2 + 175,     radius: 50,     stroke: 'black',     strokewidth: 2,     fill: 'blue' });  var circleorange = new kinetic.circle({     x: stage.getwidth() / 2 - 175,     y: stage.getheight() / 2 + 100,     radius: 75,     stroke: 'black',     strokewidth: 2,     fill: 'orange' });  circles.add(circlered); circles.add(circleblue); circles.add(circleorange);  stage.add(circles);  // on load set stage size based on window size setstagewidth();  // on window resize resize stage size window.addeventlistener('resize', setstagewidth); 

there doesn't seem wrong functions. can explain more of you're trying acheive? shouldn't max page width , max stage width same number?

your functions doing 2 things: scaling , resizing, focusing on scale based on horizontal change. try changing diagonal scaling factor or scale vertical , horizontal separately.

// sets scale , dimensions of stage in relation window size function resizestage() {     var horizscalepercentage = window.innerwidth / maxpagewidth;     var vertiscalepercentage = window.innerheight/ maxpageheight;      stage.setattr('scalex', horizscalepercentage );    stage.setattr('scaley', vertiscalepercentage );    stage.setattr('width', maxstagewidth * horizscalepercentage );    stage.setattr('height', maxstageheight * vertiscalepercentage );    stage.draw(); };  //sets scale , dimensions of stage max settings function maxstagesize() {     stage.setattr('scalex', 1);     stage.setattr('scaley', 1);     stage.setattr('width', maxstagewidth);     stage.setattr('height', maxstageheight);     stage.draw(); }; 

http://jsfiddle.net/8cw7j/1/ check fiddle