Что то ребята у меня нифига не выходит.
Наделал всякой фигни, а то что нужно не выходит.
http://learn.alpaca.org.ua/canavas.html
http://learn.alpaca.org.ua/druag.html

Наталкните на мысль.

ozzon91,
да вы не отрисовывайте все на канвасе, рисуйте только линии,

возьмите jquery ui dragable, там есть событие drag, вот на него повешайте обновление канваса

Прикольные куранты))) Только :
1) В функции draw - попробуй, переставь местами
line(); и rect(x - 15, y - 15, 30, 30); Чтобы линия была под блоком
2) у меня хром твой фон не видит (http://learn.alpaca.org.ua/druag.html) - все белое, лучше поменять на нормальный цвет
И 2 глюка еще надо убрать. (чтбы блок не выходил за канвас и иногда мышка рисует без нажатия - у меня тоже такое было)

Вопрос на самом деле в том, как сделать чтобы линии были жестко заданными.
Есть такой метод (подробностей не знаю, надо читать): http://www.w3.org/TR/2dcontext/#dom-...-ispointinpath
Возможно пригодится (если определить окружность, дальше которой линии не могут уходить и делать проверку).

Икак сделать чтобы блок тоже перетаскивался по определенной окружности и сохронял саое положение, а не крутился вокруг своей оси.

Я исчерапал все идеи, опыта наверное маловато

И как же сделать на jquery ui dragable что бы блок драгабился по определенной траектории

вот держите вариант

Благодарю, вы очень помогли

Dmitriyff, не могли бы вы расставить комментарии по js коду вашего примера.