How do I show the current view from the viewport on my map?

Question

I'm doing HTML5 Canvas development and currently have a large viewport (on the left) and a map (on the right). Like this:

I need to show on the map what is currently being viewed in the left. And I'm at a lost on how to calculate this. This is how I want it to be:

I am manipulating the main viewport via a transformation matrix. like [1, 0, 0, 1, 0, 0]

This is decently common functionality in different games and apps. So I assume there are resources on how to do it. But I haven't been able to find any.

Answer 1

I'm going to assume the following:

• you wish to do something like you posted in Picture Nr. 2.
• you have the relative position of the viewport in Space (x,y)
• the map on the right is static and depicts the entire space

I'll call the Main (left) Camera/viewport "View", the right one "Map" and the red Rectangle marking the position on the Map as "Rect". and I'll use some pseudo language as I'm no HTML5 Expert.

Rect.left   = (View.x / TotalSpaceWidth) * Map.Width
Rect.top    = (View.y / TotalSpaceHeight) * Map.Height
Rect.right  = Rect.left + View.Width / TotalSpaceWidth
Rect.bottom = Rect.top - View.Height / TotalSpaceHeight

If your Map on the right is not Static, you will need to adjust the above by the corresponding offsets.

To incorporate rotations, simply rotate the Rect by the given angle.

I hope this was what you were looking for