Как сделать свой элемент управления и взаимодействовать с ним?
Боюсь, что в рамках короткого ответа этого не описать. В приведенной Вами задачке соединяются вместе несколько технологий, каждая из которых — свой огромный мир. В какой пропорции их соединить зависит от очень большого числа факторов. Перечислю в порядке возрастания сложности эти технологии со ссылками на учебные материалы:

1. HTML
2. CSS3
3. HTML DOM
4. JavaScript
5. Писать многие вещи с нуля на голом JS интересно будет только для целей самообразования. В большинстве случаев, можно и нужно воспользоваться готовыми фреймворками. Один из таких популярных пакетов — JQuery

Пожалуй, вот тут сделали хороший пример, демонстрирующий некоторые приемы объединения всех этих технологий в рабочий элемент управления.

Альтернативный вариант, это взять что-нибудь готовое и допилить под свои нужды. Полезно покопаться в чужом коде и подсмотреть как оно там работает. Отличный кандидат для вскрытия по Вашей задачке это Raphaël
В общем подскажите пример как сделать нарисовать что то — и потом с этим взаимодействовать? Скажем пусть будет кривая безье — чтобы можно было ткнуть в точку и потягать за нее меняя кривую… 

Canvas. 
1) Рисуете кривую. 
2) Обрабатываете события мыши и перерисовываете кривую.