minimaps | Minimap generator used for the 2014 NY | Frontend Framework library

I am importing an external SVG using the code below and I have attached zoom and pan behavior to it, which is working fine.

I have also created a type of minimap, which shows the same SVG, but only as a smaller version.

I would like to show a rectangle on the minimap that represents the current viewport shown on the screen. However, I am having trouble with the correct scaling and positioning.

JS CODE:

My game is in C# using OpenTK, which is a wrapper around OpenGL. I'm rendering my mini-map as shown below. The problem is that objects aren't clipped at the edge, so they bleed over. I could render a thicker border to hide it, but that's not ideal and it won't work for larger objects. There could be trajectory lines and other things which also bleed beyond the bounds. I'm just rendering these using basic primitives.

How can I go about clipping this region? Is there any way to render this to a hidden canvas then copy just the circular region over?

SOLUTION

@BDL answered the question, but I had to tweak a few more things to get it to work, so here is the full solution in case anyone finds it useful:

Enable the stencil buffer in the GameWindow constructor GraphicsMode param.