Canvas Creating Second Line

I can create resizable and movable line.But I can't create the second line.I think I had to save objects on canvas and drawagain with drawImage but I could not do it.Also I use unbind to stop drawing

http://jsfiddle.net/dTs4h/

var canvas = document.getElementById( 'canvas' ),
    c = canvas.getContext( '2d' ),
    mouseX = 0,
    mouseY = 0,
    width = 700,
    height = 700,
    distx = 0,
    disty = 0,
    hw = 10,
    hh = 10;


canvas.width = width;
canvas.height = height;

function draw(x,y) {


  distx = mouseX - hw;
  disty = mouseY - hh;

  c.clearRect( 0, 0, width, height );
  // set the colour
  c.save();
  c.translate( hw, hh);
  c.beginPath()
  c.strokeStyle = '#fff';
  c.moveTo(x, y );
  c.lineTo( distx, disty );
  c.closePath();
  c.stroke();

  c.closePath();
    c.restore();        
    c.save();



}
var abc = true;
//all browsers

var click =     $("canvas").bind('click',function(eb){
  if( eb.offsetX ){
    mX = eb.offsetX;
    mY = eb.offsetY;
  } else {
    mX = eb.pageX;
    mY = eb.pageY;
  }
var mousemove = $("canvas").bind('mousemove',function(e){
  if( e.offsetX ){
    mouseX = e.offsetX;
 开发者_如何学JAVA   mouseY = e.offsetY;
  } else {
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
draw(mX,mY);
});
});
$("canvas").dblclick(function(){
$("canvas").unbind("mouseenter");
$("canvas").unbind("mousemove");
});

What should I do to create second line

The main problem here is the following:

In order to have a display that is refreshed, you're calling clearRect on every refresh, and that clears your previous drawing.

One of the way to deal with that problem is to use two canvas one above the other. You use one of them to keep track of the future draw (so on this one you don't care to clear, there is just the current line). And the other one is used to draw each line when the user create it. This one is never cleared.

As an example might be a better way to understand, you can see an example of that here: http://jsfiddle.net/dTs4h/1/