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

问题

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.

回答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.

回答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

来源：https://stackoverflow.com/questions/3749880/i-am-able-to-draw-the-box-but-i-am-not-able-to-remove-it-canvas

标签

javascript

html5

canvas

mootools