title: Working with Multiple Layers - KineticJS
body: <p>I'm using KineticJS 4.0.5 and I'm currently trying to draw the contents of several layers but only the last one added to stage is drawn... If I understood the documentation correctly this should be possible, otherwise why would we need a layer?</p>
  
  <p>I have three different layers:</p>
  
  <ul>
  <li>a background layer with just a Kinectic.Rect object;</li>
  <li>a elements layer with several types of shapes;</li>
  <li>and a top layer with elements I want to be always on top of everything.</li>
  </ul>
  
  <p>I populate those layers inside a draw function I have inside a object I created, this object also has a shape attribute which refers to the background and a contents attribute with the elements to add to the elements layer. My code for the draw function is the following:</p>
  
  <pre><code>this.draw = function() {
      var stage = E.game.stage, layers = E.game.layers;
  
      stage.clear();
  
      // Add Background
      this.shape.setSize(stage.getWidth(), stage.getHeight());
      layers.background.add(this.shape);
  
      // Iterate over contents
      for(var i = 0; i &lt; this.contents.length; i++) {
          layers.elements.add(this.contents[i].shape);
      }
  
      // Draw Everything
      stage.add(layers.background);
      stage.add(layers.elements);
      stage.add(layers.top); // This one is currently empty
      stage.draw();
  }
  </code></pre>
  
  <p>After running this function, only layers.top is drawn in the canvas, and if I comment the line where it is added only layers.elements is drawn. However the stage has 3 childrens (I checked it with inspect element on chrome) and in the documentation it says the draw function draws all layers... Am I doing something wrong here? Or it isn't possible? And if it's not possible why would I need a layer and a stage? Wouldn't one be enough?</p>
  
  <p>Thank you in advance.</p>
  
  <p><strong>Edit</strong>: I was able to solve the problem, I was applying a white background color with css to the canvas element and since each layer creates a new canvas element above the others I could only see the contents for the top most layer (in this case just white).</p>
  
  <p>However, I still have a problem related with multiple layers that I didn't have before with just one layer. When I use the clear function on the stage it should clear the layers right? But instead the layers remain exactly the same, even if I try to call clear on each individual layer they won't change... I'm also using the stage draw function after clearing them but still no changes at all... The only solution I found until now was by removing the layer from the stage and adding it again :s Is there a better way to reset the layers contents?</p>
  
  <p>Thank you again and sorry for the confusion with the first question.</p>