Javascript and HTML5, modifying existing gradients

Question

I'm trying to write a small drawing room application, specifically to avoid users needing Java, flash or shockwave installed. And I'm having some issues with gradients in the colour picker.

To be specific, the problem seems to be that I can not find a way to properly clear and restart a gradient. I am doing a three line (currently 3 canvas prototype) R G B gradient similar that of SAI Paint tool, and other drawing programs, and when updating/modifying the gradient it does not update the way I expect it to, and the result is the 'drawbar' showing incorrect colours compared to the output.

I am using addColorStop() to update the gradient, but what I am getting is almost as if it is pushing the offset, rather than replacing it.

            function sendUpdate(p, p2, p3) //sends update to colour bars.
        {
        //  var id;
            var p;

            cr.beginPath();
            rbg.addColorStop(0, "#00" + hxb + hxc ); //00 00 00 black
            rbg.addColorStop(1, "#FF" + hxb + hxc ); //FF 00 00 bright red
            cr.rect(0, 0, r.width, r.height);
            cr.fillStyle = rbg;
            cr.fill();
            cr.closePath();
            //indicator
            cr.beginPath();
            cr.rect(p - 2, 1, 3, 6);
            cr.lineWidth = 1;
            cr.strokeStyle = "#E0E0E0";
            cr.stroke();
            cr.closePath();

            cg.beginPath();
            cg.rect(0, 0, g.width, g.height);
            gbg.addColorStop(0, "#" + hxa + "00" + hxc ); //FF 00 00 bright red. 
            gbg.addColorStop(1, "#" + hxa + "FF" + hxc ); //FF FF 00 yellow
            cg.fillStyle = gbg;
            cg.fill();
            cg.closePath();
            cg.beginPath();
            cg.rect(p2 - 2, 1, 3, 6); 
            cg.lineWidth = 1;
            cg.strokeStyle = "#E0E0E0";
            cg.stroke();
            cg.closePath();

            cb.beginPath();
            cb.rect(0, 0, b.width, b.height);
            bbg.addColorStop(0, "#" + hxa + hxb + "00" ); //FF 00 00 bright red
            bbg.addColorStop(1, "#" + hxa + hxb + "FF" ); //FF 00 FF pink/purple
            cb.fillStyle = bbg;
            cb.fill();
            cb.closePath();
            cb.beginPath();
            cb.rect(p3 - 2, 1, 3, 6);
            cb.lineWidth = 1;
            cb.strokeStyle = "#E0E0E0";
            cb.stroke();
            cb.closePath();

            document.getElementById("colourIndicator").style.backgroundColor=clr;

        }

        function link(id, x, p) //takes id(which colourbar) 0-255 value and position 0-170 value and UPDATES COLOUR! Use this to initialize or call!
        {
            var x;
            var p;

            if (x <= 255)
            {
                switch(id)
                {
                case 0:
                    hxa = toHex(x);
                    if (hxa.length == 1) { hxa = "0" + hxa; }
                    clr = "#" + hxa + hxb + hxc;
                    document.getElementById("debugc").innerHTML="case0 output: " + hxa + hxb + hxc;
                    pos1 = p;
                    sendUpdate(p, pos2, pos3);
                break;
                case 1:
                    hxb = toHex(x);
                    if (hxb.length == 1) { hxb = "0" + hxb; }
                    clr = "#" + hxa + hxb + hxc;
                    document.getElementById("debugc").innerHTML="case1 output: " + hxa + hxb + hxc;
                    pos2 = p;
                    sendUpdate(pos1, p, pos3);
                break;
                case 2:
                    hxc = toHex(x);
                    if (hxc.length == 1) { hxc = "0" + hxc; }
                    clr = "#" + hxa + hxb + hxc;
                    document.getElementById("debugc").innerHTML="case2 output: " + hxa + hxb + hxc;
                    pos3 = p;
                    sendUpdate(pos1, pos2, p);
                break;
                }
            }
            else 
            {
                x = 255;
                p = 170;
                link(id, x, p);
            }
        }

I am pretty new to javascript, and I was not able to figure this out on my own. I've read through W3 section on gradients in canvas, and the function description. Some of the colour picker and colour wheel solutions found here might help me later on, but none of them seemed to mention my issue with actually updating the gradient repeatedly.

The comments behind addColorStop is the output that I want if the user had selected the colour FF0000, leaving the gradients to display the mixed colours the user can achieve. Oh, and the create gradient is called outside of the function in this version.

Answer 1

I think you need to "restart" your gradient, as if you add color steps over an already created gradient they won't overwrite those that it already has.

Try nullifying your rbg object on the start of the function and creating again the gradient object