使用HTML5和JavaScript在可拖动画布上绘制

Question

I am currently creating post notes. You can add notes by a button. You can click on those notes when you want to draw into them.

The problem is when I want to draw on a canvas I can only do that when it's in the left top corner. I think there is a problem with the registration point of the context.

How can I let the context follow the canvas when I drag it?

Answer 1

to get the offset of your element use:

            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
                };
            } 

where el is your note element.