Rotating an image in canvas and keeping it draggable

Question

I have an image that I draw on a canvas. When the mouse clicks and drags I get the mouse coordinates and use them to set the positionX and Y of the image. After that's been done I redraw the canvas. That works like a charm and I can move the image over the canvas.

But now I make 2 buttons so I can rotate the image left and right. When I rotate the image it now moves relative to the angle I have rotated. So when I rotate the image 180deg and drag the image up it goes down! I don't know why this happens or how I can compensate for it. :(

Well I understand I may be a bit vague so here is a demo of the problem.

Answer 1

try to swap this two lines

oContext.translate(oImage.size.x /2 ,oImage.size.y / 2);
oContext.rotate(oImage.rotate * Math.PI/180);

first rotate and then translate.

Answer 2

Have you find the solution?