To be more specific, here are the steps I need:

onmousedown - set x and y of rect as mouse coordinates

onmousemove - using the current x and y mouse coordinates calculate height and width of the rect, set these and append

onmouseup - remove the rectangle, and call a function based off some calculations from the rect.

Here is what I have but isn't quite working (right now I have it drawing a line to make it simpler):

onmousedown: startbox(evt)

function startbox(evt)
{
    if(evt.button === 0)
    {
    x1 = evt.clientX + div.scrollLeft-5;
    y1 = evt.clientY + div.scrollTop-30;
    obj.setAttributeNS(null, "x1", x1);
    obj.setAttributeNS(null, "y1", y1);     
    Root.setAttributeNS(null, "onmousemove", "updatebox(evt)");
    }
}

onmousemove: updatebox(evt)

function updatebox(evt)
{
    if(evt.button === 0)
    {
        x2 = evt.clientX + div.scrollLeft-5;
        y2 = evt.clientY + div.scrollTop-30;
        Root.appendChild(.obj);
        w = Math.abs(x2-x1);
        h = Math.abs(y2-y1);
        var strokecolor;
        if(w>20 && h>20)
        {
            strokecolor = "green";
            validbox = true;
        }
        else
        {
            strokecolor = "red";
            validbox = false;
        }
        var Attr={
            x2:x2,
            y2:y2,
            stroke:strokecolor
            }
        assignAttr(obj, Attr); //just loops thru adding multiple attributes
    }
}

onmouseup: endbox()

function endbox(evt)
{   
    if(evt.button===0)
    {
        Root.setAttributeNS(null, "onmousemove", "");
        Root.removeChild(obj);
        if(validbox)
        {
            //do stuff
            validbox = !validbox;
        }
    }   
}

Some of my problems with this are: Its slow in Chrome making drawing the line/rect feel sluggish. It won't work two times in a row. This is the real problem that I can't fix.

Any and all feedback is welcome.