How to rotate and scroll to bottom background's image on canvas HTML5?

[Hackkpo]

I'm here searching for help, what I'm doing is not exactly a game, but shares many principles. I'm pretty rookie with canvas, this is my first project.

Imagine any game's minimap, like World of Warcraft or GTA, where you can see the player's cursor on the center and the background rotates as the player commands indicates. I'm coding something like that in canvas html5. The functions over this background will be zooming, scrolling to bottom and rotation (the 3 has to be seemingly infinite).

Did it drawing it with canva's tools and loading as an image file too (in the code, the drawing alternative is commented).

Now I need to scroll the background to bottom as the user moves "the player", and rotate it as the user turn "the player". So the background always will scroll to bottom (rotated or not).

I need some advice about how to do it, because I'm a pretty lose. The image itself doesn't have to be a grid, it could be anything as the movement functions gets noticed.

PD: As you can see in the code, there's a function to rotate the background already (drawBestFit), and it works perfectly, I've got it from here. But with that function I have another issue, the anchor's rotation is on center and I need it to be on the machine's (black triangle) position.

Here's my code --> JSitor

[grelf]

You can see an example of this kind of thing here: https://myforest.uk

Not only does the map move as the user moves around on the ground (in the scene display) but you can separately scroll/pan the map by varying increments. If you check the "Orient map" box it rotates to any angle too. It is all done in the basic 2D canvas context.

How it is done is described here: https://grelf.net/forestdesign.html#N657302 and you can easily find my JavaScript source files for details.