Javascript Canvas fillRect transparent black

Question

I'm developing a resource monitor with JavaScript, and I pretend to complete it with an cool background animation.

I'm having trouble with fillRect and transparent colors in fillStyle, eg.:

        function draw() {
            ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
            ctx.fillRect(0, 0, c.width, c.height);
            ctx.fillStyle = "#00FF00";
            ctx.strokeStyle = "#00FF00";
            ctx.beginPath();
            ctx.arc(getRandom(0, c.width),getRandom(0,c.height),25,0,2*Math.PI);
            ctx.arc(getRandom(0, c.width),getRandom(0,c.height),25,0,2*Math.PI);
            ctx.stroke();
        }

It works fine, but it doesn't fill completely, leaving some "ghosts" where circles already passed before.

There is anyway to fix this and make background pure black again?

Notes: I can't draw pure black, because I want the drawed lines smoothly disappear

Image of the problem: http://i.stack.imgur.com/GrPxX.png Note that yellow dots are most recent lines, orange are transitional lines, which give the smooth effect, and red dot are the "ghosts"

Answer 1

When you fill the rectangle, you're using a semi-transparent black. What that will do is to darken what's there, but it won't obliterate it, because it's semi-transparent. If you want to cover it up with pure black, either set full opacity (max alpha value), or else use an rgb colour rather than rgba. If you use rgb, the alpha value will implicitly be set to opaque.