title: Kineticjs how to centre image on stage and resize depending on browser
body: <p>I am adding an image to the stage as a background image and a rectangle. How can I ensure that the rectangle is centred on the stage and that the background resizes depending on the browser? </p>
  
  <pre><code>&lt;body style="overflow: hidden"&gt;
  &lt;div id="container" style="width:100%;height:100%;margin:auto;"&gt;&lt;/div&gt;
  &lt;script&gt;
  var stage = new Kinetic.Stage({
  container: 'container',
  width: 1680,
  height: 1050
  });
  
  var layer = new Kinetic.Layer();
  stage.add(layer);
  
  var rect = new Kinetic.Rect({
      x: 239,
      y: 75,
      width: stage.getWidth() / 2,
      height: stage.getHeight() / 2,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 4
    });
  
    layer.add(rect);
    stage.add(layer);
  
  var imageObj = new Image();
    imageObj.onload = function() {
      var myBg = new Kinetic.Image({
       x: 0,
        y: 0,
        image: imageObj,
        width: 1770,
        height: 1200,
        opacity: 0
      });
  
      layer.add(myBg);
      stage.add(layer);    
  
  imageObj.src = 'img/bg.png';
    &lt;/script&gt;
   &lt;/body&gt;
  </code></pre>