Javascript-форум - Подскажите технологию для реализации.

Доброго дня всем. Прошу подсказать технологию для реализации. Ситуация вот в чем. Стоит задача реализовать схему теплосети с помощью JS. Я попытался сделать на Canvas. Схему отрисовать получилось но последующее задачи выполнить не могу.
1. Необходимо по клике на отрезок выводить информацию о нём (диаметр, длина и т.д.
2. Привязать к определённым отрезкам инпуты.
На данном этапе пока всё. Может кто то сталкивался с данной проблемой либо может подсказать в какую сторону копать.
Привожу ниже код. Если необходимо приложу бд.

<body>

  <canvas id="cnv" width="5000" height="5000" style="border:solid 2px;">Ставь нормальный браузер</canvas>
                        <script type="text/javascript" src='canvas.js'></script>  
</body>

$.ajax({//делаем ajax запрос
	url: "canvas.php",//указываем адрес
	success: function(data) { //в случае удачного запроса выполняем действия
		arr = data.split(',');//разбиваем полученную строку на массив
		k=0;//обьявляем переменную для определение елемента начальных или коннечных координат
		t=0;//обьявляем переменную для определения стартовой точки отрисовки коорлинат
		var ctx = document.getElementById('cnv').getContext('2d');//обьявляем переменную для отрисовки схему в canvas
		ctx.beginPath();//говорим бразуеру о том что сейчас будем рисовать линии
		ctx.translate(0,ctx.canvas.height);
		ctx.scale(1,-1);//переворачиваем изображение
		ctx.translate(-1000,1800);//смещеие чертежа на указанное кол-во пикселей
		for(var i=0; i<arr.length; i++) {//запускаем цикл
			sum=i%2;//определяем чётное или нечётное число

			if (k == 1 || k == 0){
				if (sum==0){//если чётное значить это координата х
					x=parseInt(arr[i]);//присваем переменно х значение элемента массива i при это преобразовуя в целые числа
				}
				else{
					y=parseInt(arr[i]); 
					ctx.moveTo(x,y);//ставим начальную точку от которой будем рисовать линиию
				}
			}
			ctx.lineWidth=5;
			if (k == 2 || k == 3){
				if (sum==0){
					x=parseInt(arr[i]);
				}
				else{
					y=parseInt(arr[i]);
					ctx.lineTo(x,y);//ставим конечную точку 
					t=1;
				}
			}
			k++;
			if (k>3)k=0;
		}
		ctx.stroke();//говорим о том что закончили отрисовывать схему
	}
});

код который у меня есть в данный момент.

$i=0;//счётчик для цикла
	$db = mysql_connect("localhost","root","");//подключаемся
	$a=mysql_select_db("csv_db",$db);//выбираем базу
	$result = mysql_query ("SELECT * FROM `table 8`",$db);//делаем запрос
		while($row = mysql_fetch_assoc($result)) {//цикл выбора необходимых данных
			$result2 = mysql_query ("SELECT * FROM `table 9` where `id`=".$row['NODE1']."",$db);//делаем запрос
			$row2 = mysql_fetch_assoc($result2);
			$result3 = mysql_query ("SELECT * FROM `table 9` where `id`=".$row['NODE2']."",$db);//делаем запрос
			$row3 = mysql_fetch_assoc($result3);
			$start[]=$row2['X'];//добавляем значение х в массив
			$start[]=$row2['Y'];//добавляем значение у в массив
			$start[]=$row3['X'];//добавляем значение х в массив
			$start[]=$row3['Y'];//добавляем значение у в массив
			$i++;
		}
	$comma_separated = implode(",", $start);//преобразуем массив в строку с розделителем ","
	echo $comma_separated;//выводим данные для отправки по ajax

Заранее огромное спасибо.:help: