I am able to draw the box but I am not able to remove it! (Canvas)

Question

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

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

The library I am using to implement this is via mootools canvas library. Here is the link of the functions.

Hopefully this will help people get my query. Feel free to ask questions if you are still pondering about what exactly is my problem! Thanks

EDIT : There is a bug in the library. Please find the link to the corrected code below in the comments of the answer. Thanks.

Answer 1

Looking at the docs of the remove function it seems that you should be passing the itemId not the the actual item object when calling it.

Answer 2

the error in the library was in the remove function. I have the following script which removes the bug. Hope it helps people. :)

http://gist.github.com/589185