Question

I am creating a mootools class and using the Mootools Canvas Library to basically just create (for now) a small square wherever there is a click event on another canvas item area. Imagine the photoshop pen tool and nodes.

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();

    }
})

Now I have tried everything to stop this but whenever I click more than once the opacity goes up (see the opacity fill). How do I stop this from happening? I need to “clear” the canvas correctly, I think.

Answer 1

I’m fairly new to canvas myself, but found that ctx.beginPath() will get you a “new start”, but then you also need to do moveTo() again, and draw up all polygons and lines again.

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

That will draw up to equally opaque boxes.