Adding objects into an array in javascript

I am trying to get the mouse pointer coordinates and store them into an array(tail) such that the array is limited only to 100 objects. If extra objects comes,the old one's are to be replaced with the new one's. Basically like a queue. Basically i am trying to create a trail after the basic circle using a circle of smaller radius.

Here's my js:

 $(document).ready(function() {
    var tail = {
        x:0,
        y:0
    };
    var i = 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
    });

  var pixel = new Kinetic.Circle({
        x: 20,
        y: 20,
        radius: 2,
        width: stage.getWidth(),
        height: stage.getHeight(),
        fill: "white"
    });

    layer.add(player);
    stage.add(layer);

    // move the circle with the mouse
    stage.getContent().addEventListener('mousemove', function() {
        player.setPosition(stage.getPointerPosition());
        console.log(stage.getPointerPosition());
        var obj = {
            x: stage.getPointerPosition().x,
            y: stage.getPointerPosition().y
        }
        tail[i].push(obj);
        ++i;
        console.log(tail[i]);
//        pixel.setPosition(tail[i], tail[i + 1]);
        layer.draw();
    });
  });

And here's the html:

 <!DOCTYPE html>
<html>
    <head>
        <title>Collision Detection</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="../css/style.css"/>
    </head>
    <body>
        <div id="container" style=" background:#000; margin:auto; float:left;"></div>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/kinetic-v5.0.0.min.js"></script>
        <script src="../js/main_kinetic.js"></script>
    </body>
</html>

Output: Uncaught TypeError: Cannot call method 'push' of undefined main_kinetic.js:46 Object {x: 656, y: 175} --> console output which returns the cursor position.

Here's the fiddle: http://jsfiddle.net/BVeTH/

Solution

You could create your own container for your data points that handles only keeping 100 (or however many you want). Something like this:

var LimitedArray = function (upperLimit) {
    var storage = [];

    // default limit on length if none/invalid supplied;
    upperLimit = +upperLimit > 0 ? upperLimit : 100;

    this.push = function (item) {
        storage.push(item);
        if (storage.length > 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 < l; i++) {
            iterator(storage[i]);
        }
    };
};

(see here: http://jsfiddle.net/Frm27/4/)

Then you can track your datapoints easily:

var trail = new LimitedArray(100);

// code...

// move the circle with the mouse
stage.getContent().addEventListener('mousemove', function() {
    player.setPosition(stage.getPointerPosition());
    console.log(stage.getPointerPosition());
    var obj = {
        x: stage.getPointerPosition().x,
        y: stage.getPointerPosition().y
    }
    trail.push(obj);
    trail.iterateItems(function (item) { 
         // Do something with each item.x and item.y
    });
    //        pixel.setPosition(tail[i], tail[i + 1]);
    layer.draw();
});