Mouse position not consistent with HTML canvas ondrag

I am trying to drag some shapes in HTML canvas but I am encountering a problem with respect to determining the change in mouse coordinates [dx,dy]

First of all, there is no problem in the coordinates themselves, stored in mousePos as the rollover effects work flawlessly. What I am doing is, upon first entering the shape, saving the mouse 开发者_如何转开发coordinates.

pos = {x : mousePos[0] , y : mousePos[1]};

Then, onMotion updates the coordinates everytime the mouse moves as well as recording the current position

dx=mousePos[0]-pos.x;
dy=mousePos[1]-pos.y;
pos = {x : mousePos[0] , y : mousePos[1]};

Then I add the dx and dy values to the shapes coordinates (lets take a simple rectangle as an example)

ctx.fillRect(0+this.dx,0+this.dy,100+this.dx,100+this.dy);

as long as the mouse doesn't move too fast, it works relatively well (not perfect though). If I move the mouse very quickly, without going out of the window, the rectangle does not catch up with the mouse. I can understand if there is a delay catching up to the mouse, but how can the delta values be off? Clearly we know where we started, and even if dozens/hundreds of pixels are skipped in the process, eventually the mouse should stop and the correct delta values should be calculated.

Any help would be greatly appreciated as I have hit a conceptual wall here.

You might try to get e.layerX-Y when the onMotion is fired to get the real position instead of the delta. This way it can't be "off".

To use this, place your shape into a div with style="padding:0px;margin=0px;" , because the position is relative to the parent block.