Рисуем на перетаскиваемом холсте, используя HTML5 и JavaScript

Question

Я сейчас создаю заметки. Вы можете добавлять заметки с помощью кнопки. Вы можете нажимать на эти заметки, когда хотите нарисовать их.

Проблема в том, что когда я хочу нарисовать на холсте, я могу сделать это только тогда, когда он находится в левом верхнем углу. Я думаю, что есть проблема с точкой регистрации контекста.

Как я могу позволить контексту следовать за холстом при его перетаскивании?

Answer 1

, чтобы получить смещение вашего элемента, используйте:

            function getOffset(el) {
                var _x = 0;
                var _y = 0;
                while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
                    _x += el.offsetLeft - el.scrollLeft;
                    _y += el.offsetTop - el.scrollTop;
                    el = el.parentNode;
                }
                return {
                    top : _y,
                    left : _x
                };
            } 

, где el - ваш элемент заметки.