Clipping renderables ( minimap !)

[Hatrixor]

Hi guys,

I wasn't sure if I could make a minimap in HTML5 as no libraries are available. so after trial and error I managed to make the map image move accuretly according to player position based on a formula only god knows how I came up with. 

The problem is pretty obvious in the screenshot, how can I make the image only visible inside the minimap frame? usually it can be done by playing around Z variable but in this case the tiled map is complicating things.

I'm not sure if a square minimap frame would help me find a solutions to this (by croping the mini map each movement update?) and I think it can be done using CSS but I have no clue how to add CSS style to renderables, some pointers are welcome.
Thanks.

Just in case anyone is curious about the code I can write a short guide about creating accurate minimaps.

        game.data.minimap.pos.x=(322-((this.pos.x-610)/4.324))+384;

        game.data.minimap.pos.y=(316-((this.pos.y-545)/4.324))-215;

[Jay Oster]

Good one! I would recommend looking into context2d.clip. And here's a really good article that explains it in detail: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#Clipping_paths

Your minimap.draw method needs to:

1. Save the current context state with context.save()
2. Create a new path
3. Trace an arc to form a circle
4. Apply the clip method
5. Draw the map
6. Reset the clipping region with context.restore()
   
7. Draw the border image

That should do it!

Also, here's another forum thread where context.clip was used: https://groups.google.com/d/msg/melonjs/lkEdcCYiRew/UmAxi05JW_4J

[Hatrixor]

Thanks Jay,

That worked perfectly.

    "draw" : function(context)

    {

      context.save();

      context.beginPath();

      context.arc(715,113,100,0,Math.PI*2,true);

      context.clip();

      this.parent(context);

      context.restore();

[Hatrixor]

I'm writing an in depth guide on making minimaps, I'll post it an a bit.