title: Kinectisj: Issue where mouse trail remains(Layer issue)
body: <p>I am making a game as a selfstudy.</p>
  
  <p>My objective is to have a trail after the mouse pointer.(Which works)
  But,when i open on chrome and run it.
  After a certain height and width,the trail stays on the canvas instead of being wiped off.
  Can anyone help me with this?</p>
  
  <p>Here's the fiddle for it: <a href="http://jsfiddle.net/Frm27/4/" rel="nofollow">http://jsfiddle.net/Frm27/4/</a>
  But please do try it on chrome or any browser,cause the issue is not on fiddle but the browser!</p>
  
  <p>I have the following codes:</p>
  
  <pre><code>var LimitedArray = function (upperLimit) {
      var storage = [];
  
      // default limit on length if none/invalid supplied;
      upperLimit = +upperLimit &gt; 0 ? upperLimit : 100;
  
      this.push = function (item) {
          storage.push(item);
          if (storage.length &gt; upperLimit) {
              storage.shift();
          }
          return storage.length;
      };
  
      this.get = function (i) {
          return storage[i];
      };
  
      this.iterateItems = function (iterator) {
          var i, l = storage.length;
          if (typeof iterator !== 'function') { return; }
          for (i = 0; i &lt; l; i++) {
              iterator(storage[i]);
          }
      };
  };
  
  $(document).ready(function() {
      var tail = new LimitedArray(50);
  
      var i = 0, j = 0;
      var stage = new Kinetic.Stage({
          container: 'container',
          width: window.innerWidth,
          height: window.innerHeight,
          listening: true
      });
      var layer = new Kinetic.Layer({
          listening: true
      });
      var layer = new Kinetic.Layer();
      var player = new Kinetic.Circle({
          x: 20,
          y: 20,
          radius: 6,
          fill: 'cyan',
          stroke: 'black',
          draggable: true
      });
  
      layer.add(player);
  
  
      // move the circle with the mouse
      stage.getContent().addEventListener('mousemove', function() {
          layer.removeChildren();
          layer.add(player);
          player.setPosition(stage.getPointerPosition());
          var obj = {
              x: stage.getPointerPosition().x,
              y: stage.getPointerPosition().y
          };
  
          tail.push(obj);
          var arr = [];
          tail.iterateItems(function (p) {
              arr.push(p.x, p.y);
          });
          var line = new Kinetic.Line({
          points: arr,
          stroke: 'white',
          strokeWidth: 2,
          lineCap: 'round',
          lineJoin: 'round'
        });
          layer.add(line);
          layer.draw();
      });
      stage.add(layer);
  });
  </code></pre>
  
  <p>Here's the html:</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Collision Detection&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width"&gt;
          &lt;link rel="stylesheet" href="../css/style.css"/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container" style=" background:#000; margin:auto; float:left;"&gt;&lt;/div&gt;
          &lt;script src="../js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="../js/kinetic-v5.0.0.min.js"&gt;&lt;/script&gt;
          &lt;script src="../js/main_kinetic.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>html {
      color:#000;
      background:#222222;
  }
  a {
      cursor:pointer;
      list-style: none;
  }
  html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      overflow: hidden;
  }
  html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
      margin:0;
      padding:0;
  }
  #container {
      background:#000;
      margin:auto;
      cursor:none;
      float:left;
  }
  </code></pre>