Javascript 建议；清算？“；帆布

我正在创建一个mootools类，并使用基本上只创建（目前）一个小正方形，只要在另一个画布项目区域上有单击事件。想象一下photoshop笔工具和节点

var Pentool = new Class({
    Implements: [Events, Options],
    initialize: function(canvasel) {

        CANVAS.init({
                canvasElement : canvasel,
                enableMouse : true
        });

        var _self = this;

        //add a layer
        var layer = CANVAS.layers.add( new Layer({
                id : 'myLayer'
        }));

        var area = new CanvasItem({
            id: 'area_',
            w: 360,
            h: 500,
            interactive: true,

            events: {
                onDraw: function(ctx) {
                    ctx.fillStyle = 'rgba(255,255,255,0.3)';
                    ctx.fillRect(0, 0, this.w, this.h);
                    this.setDims(0, 0, this.w, this.h)
                },
                onClick: function(x, y) {
                    _self.addNode(layer, x, y);
                }
            }

        })

        layer.add(area);

        CANVAS.draw();


    },
    addNode: function(layer, x, y) {
        var node = new CanvasItem({
            id: 'node_',
            x: x,
            y: y,
            fillStyle : 'rgba(255,0,0,1)',
            events: {
                onDraw: function(ctx) {
                    ctx.fillStyle = this.fillStyle;
                    ctx.fillRect(this.x, this.y, 12, 12);
                }
            }

        });

        layer.add(node);        
        CANVAS.draw();

    }
})

---

现在，我已经尝试了所有方法来阻止这种情况，但每当我单击多次时，不透明度就会上升（请参见不透明度填充）。我该如何阻止这种情况发生？我想，我需要正确地“清除”画布。

我自己对画布相当陌生，但我发现

ctx.beginPath（）

将为您提供一个“新的开始”，但您还需要再次执行

moveTo（）

，并再次绘制所有多边形和线条

ctx.fillStyle="rgba(255,255,255,0.5)";
ctx.fillRect(10,10,50,50);
ctx.beginPath();
ctx.fillRect(70,10,50,50);

这将吸引到同样不透明的盒子