Javascript-форум - Проблемы с рисованием круга

Имеется вот такой код:

<html>
	<body>
<script type="text/javascript">
function fix(event) {
	event = event || window.event;
	if ( !event.pageX || !event.pageY ) {
		var html = document.documentElement, body = document.body;
		event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
		event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
	}
	return event;
}
function Circle(T, L, R, S) {
var sin = Math.sin,
cos = Math.cos,
PI = 3.14;
var circle = document.createElement("DIV");
A[A.length] = circle;
for (var i = 0; i < PI * 2; i += S) {
	var sector = document.createElement("DIV");
	sector.style.cssText = "position: absolute; width: 1px; height: 1px; background: #555555;";
	sector.style.top = T + R * sin(i);
	sector.style.left = L + R * cos(i);
	circle.appendChild( sector );
}
document.body.appendChild(circle);
if (A[A.length - 2]) document.body.removeChild( A[A.length - 2] );
}

var T, L, R, A = [];

document.onmousedown = function (event) {
	event = fix(event);
	T = event.pageY,
	L = event.pageX;
document.onmousemove = function (event) {
	event = fix(event);
	var X = event.pageX - L, Y = event.pageY - T, F = Math.sqrt( X * X + Y * Y );
	Circle(T, L, F, 0.05);
};
	return false;
};
document.onmouseup = function (event) {
	event = fix(event);
	A = [];
	document.onmousemove = new Function;
	var X = event.pageX - L, Y = event.pageY - T, F = Math.sqrt( X * X + Y * Y );
	Circle(T, L, F, 0.01);
};
</script>
	</body>
</html>

Ф-ция Circle() принимает четвёртым параметром "чёткость" окружности (чем меньше — тем чётче). При каждом mousemove отрисовывается круг с чёткостью 0.05, а при mouseup отрисовывается круг с чёткостью 0.01. Ну так вот, если попробовать нарисовать второй круг, то у первого чёткость станет 0.05 вместо 0.01. Это видно на скрине http://s40.radikal.ru/i087/1010/bf/ebf6dd4d56c5.jpg. Почему?

<html> <body> <script type="text/javascript"> function fix(event) { event = event || window.event; if ( !event.pageX || !event.pageY ) { var html = document.documentElement, body = document.body; event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0); event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0); } return event; } function Circle(T, L, R, S) { var sin = Math.sin, cos = Math.cos, PI = 3.14; if (A[0]) document.body.removeChild( A[0] ); var circle = document.createElement("DIV"); A[0] = circle; for (var i = 0; i < PI * 2; i += S) { var sector = document.createElement("DIV"); sector.style.cssText = "position: absolute; width: 1px; height: 1px; background: #555555;"; sector.style.top = T + R * sin(i); sector.style.left = L + R * cos(i); circle.appendChild( sector ); } document.body.appendChild(circle); } var T, L, R, A = []; document.onmousedown = function (event) { event = fix(event); A = []; T = event.pageY, L = event.pageX; document.onmousemove = function (event) { event = fix(event); var X = event.pageX - L, Y = event.pageY - T, F = Math.sqrt( X * X + Y * Y ); Circle(T, L, F, 0.05); }; return false; }; document.onmouseup = function (event) { event = fix(event); document.onmousemove = new Function; var X = event.pageX - L, Y = event.pageY - T, F = Math.sqrt( X * X + Y * Y ); Circle(T, L, F, 0.01); }; </script> </body> </html>