[Moo] Can't remove an item from the canvas once added! Why is this happening to me... :'( [Mootools Canvas Library]

[shouvik]

Hi All,

I have asked this question before and it seemed that the code I was
using was pretty confusing. So this is a virtually dumbed down version
of the same code. I draw a square on the canvas using the add
function. Likewise I should be able to remove the item from the canvas
using the remove function! Alas, it doesn't seem to happen.

Here is the code

$(window).addEvent('load',function(){


CANVAS.init({ canvasElement : 'canvas' });
CANVAS.layers.add( new Layer({
    id : 'myLayer'
}));

var colors = [
    'rgba(255,0,0,1)',
    ];

var pos = [
    { x: 150, y : 100 },
]

       var foo = new CanvasItem({
        id : 'item',
        x : pos[0].x,
        y : pos[0].y,
        fillStyle : colors[0],
        events : {
            onDraw : function(ctx)
            {
                ctx.fillStyle = this.fillStyle;
                ctx.fillRect(this.x,this.y,200,200);
            }
        }
    });

CANVAS.layers.get('myLayer').add(foo);
CANVAS.draw();
CANVAS.layers.get('myLayer').remove(foo);
CANVAS.draw();
    });

It can also be seen here is jsfiddle
http://jsfiddle.net/WRRns/4/
The library I am using to implement this is via mootools canvas
library. Here is the link of the functions.
http://forvar.de/js/mcl/docs.Layer.html#fn-remove

Thanks