difficulté avec les balises div

Bonsoir, j'arrive à déssiner une droite avec un code que j'ai trouvé sur le net. L'objectif est de capturer la position du point de départ et tracer la droite en draggant jusqu'au second clic, mais le problème est que lorsque je veux tracer une autre droite la précédente s'efface, du coup je ne peux avoir qu'une seule droite en même temps sur ma page alors que je veux pouvoir en avoir plusieurs.
voici le code: fonction de détection du clic

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function captureClick()
{
	if(currentMode=='noPositionDefined')
	{
		currentMode='firstPositionCaptured';
		startX=mouseX;
		startY=mouseY;
	}
	else
	{
		currentMode='noPositionDefined';
	}
}

position de la souris

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getMouseXY(aEvent)	//deplacement de l'element draguer
{
  	var myEvent = aEvent ? aEvent : window.event; //recuperation de l'evenement selon le navigateur
	//on recupere cible de l'evenemet
	var target= myEvent.target ? myEvent.target : myEvent.srcElement;
	if(myEvent.offsetX)
	{
		mouseX=myEvent.clientX+document.body.scrollLeft;
		mouseY=myEvent.clientY+document.body.scrollTop;
	}
	else
	{
		mouseX=myEvent.pageX;
		mouseY=myEvent.pageY;
	}
 
}

dessin de la droite

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function drawLine(x1,y1,x2,y2,color,espacementPointille,divId)
{
	if(espacementPointille<1) { espacementPointille=1; }
 
	//on calcule la longueur du segment
	var lg=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
	var lt=lg/100;// on passe des mm au cm en divisant par 100
	//transformation en string
	var chaine=lt.toString();
	chaine=chaine.substring(0,3);
 
	//on determine maintenant le nombre de points necessaires
	var nbPointCentraux=Math.ceil(lg/espacementPointille)-1;
 
	//stepX, stepY (distance entre deux points de pointillés);
	var stepX=(x2-x1)/(nbPointCentraux+0);
	var stepY=(y2-y1)/(nbPointCentraux+0);
 
	//on recreer un point apres l'autre
	var strNewPoints='';
	for(var i=1 ; i<nbPointCentraux ; i++)
	{
		strNewPoints+='<div style="font-size:1px; width:1px; height:1px; background-color:'+color+'; position:absolute; top:'+Math.round(y1+i*stepY)+'px; left:'+Math.round(x1+i*stepX)+'px; z-index:2;">&nbsp;</div>';
	}
 
	//point de depart
	strNewPoints+='<div style="font-size:1px; width:3px; height:3px; background-color:'+color+'; position:absolute; top:'+(y1-1)+'px; left:'+(x1-1)+'px; z-index:2; ">&nbsp;</div>';
	//point d'arrive
	strNewPoints+='<div style="font-size:1px; width:3px; height:3px; background-color:'+color+'; position:absolute; top:'+(y2-1)+'px; left:'+(x2-1)+'px; z-index:2;">&nbsp;</div>';
 
	strNewPoints+='<div style="font-size:20px; width:3px; height:3px; background-color:'+color+'; position:absolute; top:'+((y2+y1)/2)+'px; left:'+((x2+x1)/2)+'px; z-index:2;">'+chaine+'Cm</div>';
 
	//on suprimme tous les points actuels et on mets les nouveaux div en place
	//obj container des points
	var myContainer=document.getElementById(divId);
	myContainer.innerHTML=strNewPoints;
}

Code:

1
2
3
4
5
6
7
function tryDrawLine()
{
	if(currentMode=='firstPositionCaptured')
	{
		drawLine(startX,startY,mouseX,mouseY,"red","2",'myDiv');
	}
}

l'appel des fonctions

Code:

<body onMouseMove="getMouseXY(event); tryDrawLine();" onClick="captureClick();" style="background-color:#6699CC;" onLoad="currentMode='noPositionDefined';">

div dont l'id est utilisé dans la fonction tryDrawLine()

Code:

<div id="myDiv" style="position:absolute; width: 0px; height: 0px; left: 0px; top: 0px; border: 1px none #000000;z-index:2;"></div>

Merci