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

enter image description here

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:

enter image description here

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.


1 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

  • \$\begingroup\$ Your assumptions are correct except that I do not have a relative position of the viewport in space. Just my transformation matrix. So I probably need to figure out a way to calculate my relative position. I will look into that. Thanks! \$\endgroup\$ Commented Aug 25, 2011 at 21:27
  • \$\begingroup\$ Hi @MichaelKissner, if you are interested at the end of the week, our new higher-level physics site outside the SE network with the intention to some kind of revive the closed Theoretical Physics SE with a slightly broadend scope and lowered bar to ask questions (graduate-level upward) will go online. The content of the former theoretical physics site is successfully imported into the new site, called PhysicsOverflow. You can access it and see what we are doing here. In case of technical problems you can mail to [email protected] \$\endgroup\$
    – Dilaton
    Commented Apr 3, 2014 at 9:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .