for a little game i write a camera component for html5 canvas. You should be able to zoom (mousewheel), pan (left mouse) and rotate (right mouse). My Problem is after rotation if you try to move up the orientation is wrong and the image moves down.
I prepared a example here:
https://codepen.io/rogerbuecker/pen/yLzYqXq
My current draw code:
canvas.width = window.innerWidth
canvas.height = window.innerHeight
// Translate to the canvas centre before zooming - so you'll always zoom on what you're looking directly at
ctx.translate( window.innerWidth / 2, window.innerHeight / 2 )
ctx.rotate(cameraRotation*Math.PI / 180)
ctx.scale(cameraZoom, cameraZoom)
ctx.translate( -window.innerWidth / 2 + cameraOffset.x, -window.innerHeight / 2 + cameraOffset.y )
Regards Roger
I found a solution:
https://codepen.io/rogerbuecker/pen/yLzYqXq
Missed the part where i invertSelf the Transformation to get the Position
var transform = ctx.getTransform();
const invMat = transform.invertSelf();
I don't have too much experience with canvas, but I have a little with css transform property.
Try to create a container object, inside it put whatever you have now. Then when you need to move the image or something related to have a persistant orientation just move or apply whatever you want to the big container, then to rotate do to the small one inside it.
Let me know if it works for you.