Iteratively change the fillStyle color in canvas while drawing a fractal

I'm using the following code to generate a Pythagoras fractal tree using HTML5 canvas element:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery.js" type="text/javascript"></script>
        <style>
            #sketch
            {
            border: 1px solid black; 
            }
        </style>
        <script type="text/javascript">
        window.onload = function()
        {
            var canvas = document.getElementById("sketch");
            var context = canvas.getContext("2d");

            context.fillStyle = "rgba(0, 0, 200, 0.5)";
            context.beginPath();

            context.moveTo(450,550);
            context.lineTo(450,450);
            context.lineTo(550,450);
            context.lineTo(550,550);
            context.fill();

            fractal(context,[450,550],[450,450],[550,450],[550,550],5); 
        };

        function fractal(context,P1,P2,P3,P4,depth)
        {
            context.fillStyle = "rgba(0,0,200,"+(depth/8).toString()+")";
            context.save();
            if(depth < 0)
            {
                return null; 
            }

            /*Find C*/
            C = divide(add(divide(add(P1,P2),2),divide(add(P3,P4),2)),2);

            var V1 = divide(minus(C,P1),length(C,P1));
            var V2 = divide(minus(C,P4),length(C,P4));

            var P6 = add(P2,multiply(V2,length(P1,P2)/Math.sqrt(2)));
            var P7 = add(P6,multiply(V1,length(P1,P2)/Math.sqrt(2)));
            var P5 = add(P2,multiply(V1,length(P1,P2)/Math.sqrt(2)));
            var P9 = add(P3,multiply(V1,length(P1,P2)/Math.sqrt(2)));
            var P8 = add(P9,multiply(V2,length(P1,P2)/Math.sqrt(2)));

            context.moveTo(P2[0],P2[1]);
            context.lineTo(P6[0],P6[1]);
            context.lineTo(P7[0],P7[1]);
            context.lineTo(P5[0],P5[1]);
            context.fill();

            context.moveTo(P5[0],P5[1]);
            context.lineTo(P8[0],P8[1]);
            context.lineTo(P9[0],P9[1]);
            context.lineTo(P3[0],P3[1]);
            context.fill();

            fractal(context,P2,P6,P7,P5,depth-1);
            fractal(context,P5,P8,P9,P3,depth-1);
        }

        function multiply(v, num){
            return [v[0]*num, v[1]*num];
        }

        function divide(v, num){
            return [v[0]/num, v[1]/num];
        }

        function add(a, b){
            return [a[0]+b[0], a[1]+b[1]];
        }

        function minus(a, b){
            return [a[0]-b[0], a[1]-b[1]];
        }

        function length(a, b){
            return Math.sqrt(Math.pow(a[0] - b[0],2) + 
                Math.pow(a[1] - b[1],2));
        }
        </script>
        <title>Square</title>
    </head>
    <body>
        <canvas id="sketch" height="1000" width="1000"></canvas>
    </body>

</html>

I'm changing the opacity value with every iteration. But I don't see it in the result.

How can this be fixed??

Solution

You were really close to the right solution. Look here: http://jsfiddle.net/mbessey/Wj4VH/

The key difference here is calling beginPath() before starting the moveTo() and lineTo() for each square. So, instead of:

context.moveTo(P2[0],P2[1]);
context.lineTo(P6[0],P6[1]);
context.lineTo(P7[0],P7[1]);
context.lineTo(P5[0],P5[1]);
context.fill();

context.moveTo(P5[0],P5[1]);
context.lineTo(P8[0],P8[1]);
context.lineTo(P9[0],P9[1]);
context.lineTo(P3[0],P3[1]);
context.fill();

You want:

context.beginPath()
context.moveTo(P2[0],P2[1]);
context.lineTo(P6[0],P6[1]);
context.lineTo(P7[0],P7[1]);
context.lineTo(P5[0],P5[1]);
context.fill();

context.beginPath()
context.moveTo(P5[0],P5[1]);
context.lineTo(P8[0],P8[1]);
context.lineTo(P9[0],P9[1]);
context.lineTo(P3[0],P3[1]);
context.fill();

What you were doing was essentially creating one large path with all the squares in it and then filling it all with the same color.