This forum is read only and just serves as an archive. If you have any questions, please post them on

6 years ago by BBreitenbach

So, After some work with the fog of war plugin, I wanted to look for higher performance alternatives.

Assuming I dont care about Line of Sight, the first idea that came to mind was to simply clip out a circle from a fog fillRect covering the whole canvas view. However, I can not get this to work. I did some searching around and testing on tutorial sites, and can't seem to get Impact to do the same. I have to be missing something.

The end goal is to have a transparent circle over the player which is their sight radius, with everything outside the circle getting a fillrect darkend alpha applied to it.

            //ig.system.context.rect(0, 0, ig.system.width * ig.system.scale, ig.system.height * ig.system.scale);
            //ig.system.context.fillStyle = "rgba(100, 100, 100, .8)";

            /// create path
            ig.system.context.arc(( + ( / 2) - * ig.system.scale, ( + ( / 2) - * ig.system.scale, 64 * ig.system.scale, 0, 2 * Math.PI);

            /// set clipping mask based on shape

            /// clear anything inside it            
            //ig.system.context.clearRect(0, 0, ig.system.width * ig.system.scale, ig.system.height * ig.system.scale);
            /// remove clipping mask

6 years ago by Joncom

You could use globalCompositeOperation to first draw a black rectangle over the entire screen, and then chop out a "circle" from that black rectange at the position of the player.

Edit: Does the lit area need to stay lit when the player leaves?

6 years ago by stahlmanDesign

Another very efficient solution is to put a transparent PNG file on top of the player, basically a big black square with a hole. This is how I handled it in my game when the character entered a cave.

in player Entity
darkness: new ig.Image('media/fogofwar.png'),

in player draw()
if (! && {
	if ( == "Forbiddencave" || == "Whitewhale") {
		this.darkness.draw((x / 2) - 1024, (y / 2) - 1024); // fog of war is 2048 x 2048

6 years ago by BBreitenbach

Just wanted to follow up on this for anyone who does see it. The main idea is to have a multiplayer game where each tank has a viewable radius, and anything outside that radius AND the radius of teammates is shaded. I did it with the Fog of war plugin, but the performance was a sharp hit.

I never was able to get the clipping to work within the same canvas as the game, and because certain effects change that radius, static pictures would not work.

I solved it by drawing to a second canvas, creating the clipped image for each tank, and then drawing that canvas as an image on the game canvas. Works great, and has a solid performance increase. Thanks to those folks that replied, and I hope this can help someone in the future.
Page 1 of 1
« first « previous next › last »