making box edge follow mouse pointer in javascript

I can't figure out why this doesn't work. What I have here is my own black canvas made from a DIV. In that canvas, I want the user to define the first point which I'm successful at, but after clicking the first point, when the mouse moves, the box must size properly and follow the mouse, much like drawing a rectangular box in a paint program. This is where I have difficulty.

Is there a way I can solve this such that it works at minimum and without using Jquery? all the better if I can get a solution for Internet Explorer 7 (or 8 at least).

<div ID="CANVAS" style="background:#000;width:600px;height:400px"></div>

<script>
var startx=-1,starty=-1,points=0,box;
var canvas=document.getElementById('CANVAS');
canvas.onclick=dopoint;
canvas.onmousemove=sizebox;

function dopoint(e){
  if (points==0){
    var area=canvas.getBoundingClientRect();
    box=document.createElement('DIV');
    box.style.position='relative';
    box.style.border='2px solid yellow';
    canvas.appendChild(box);
    startx=e.clientX-area.left;
    starty=e.clientY-area.top;
    box.style.left=startx+'px';
    box.style.top=starty+'px';
    box.style.width='10px';
    box.style.height='10px';
  }
  points=1-points;
}

function sizebox(e){
  if (points==1){
    var x=e.clientY,y=e.clientY; //here I'm thinking subtract old point from new point to get distance (for width and height)
    if (x>startx){
      box.style.left=startx+'px';
      box.style.width=(x-startx)+'px';
    }else{
      box.style.left=x+'px';
      box.style.width=(startx-x)+'px';
    }
    if (y>starty){
      box.style.top=starty+'px';
      box.style.height=(y-starty)+'px';
    }else{
      box.style.top=y+'px';
      box.style.height=(starty-y)+'px';
    }
  }
}

</script>

Your code was almost good, except few small things. I have corrected it and wrote some comments on the lines that I've changed.

https://jsfiddle.net/1brz1gpL/3/

var startx=-1,starty=-1,points=0,box;
var canvas=document.getElementById('CANVAS');
canvas.onclick=dopoint;
canvas.onmousemove=sizebox;

function dopoint(e){
  if (points==0){
    var area=canvas.getBoundingClientRect();
    box=document.createElement('DIV');
    box.style.position='absolute'; // here was relative and changed to absolute

    box.style.border='2px solid yellow';
    canvas.appendChild(box);
    startx=e.clientX; // removed -area.left
    starty=e.clientY; // removed -area.right
    box.style.left=startx+'px';
    box.style.top=starty+'px';
    box.style.width='0px'; // updated to 0px instead of 10 so it won't "jump" after you move the mouse with less then 10px
    box.style.height='0px'; // same
  }
  points=1-points;
}

function sizebox(e){
  if (points==1){
    var x=e.clientX,y=e.clientY; // here was x = e.clientY and changed to x = clientX
    if (x>=startx){
      box.style.left=startx+'px';
      box.style.width=(x-startx)+'px'; // here it was x+startx and changed to x-startx
    }else{
      box.style.left=x+'px';
      box.style.width=(startx-x)+'px';
    }
    if (y>starty){
      box.style.top=starty+'px';
      box.style.height=(y-starty)+'px';
    }else{
      box.style.top=y+'px';
      box.style.height=(starty-y)+'px';
    }
  }
}