Home/ Questions/Q 3950488
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T01:37:03+00:00

I have an image that I draw on a canvas. When the mouse clicks

  • 0

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 position X 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 180 degrees 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I cannot access the demo url you provided, but this should be universal.

    You need to move your object to the base of your coordinate space o:(0,0), do your rotation, and then move your object back to where it was before you moved it, and since all your transformations are joined into a single transformation matrix, the order of transformations is very important, and you basically just need to do them inversely, i.e. move your object back to its initial position, then rotate it, and then move it to the coordinate space base:

    ctx.translate(objects_x_position, objects_y_position);
ctx.rotate(angle);
ctx.translate(-objects_x_position, -objects_y_position);

    And voila.
    Here’s the demo: http://jsfiddle.net/ArtBIT/CdbWx/1

    • 0